vue 组件中slot插口的具体用法


Posted in Javascript onApril 03, 2018

子组件

<template>
  <div class="slotcontent">
    <ul>
      <!--<slot></slot>-->
      <li v-for="item in items">{{item.text}}</li>
    </ul>
  </div>
</template>
<script>
  export default{
    data(){
      return{
        items:[
          {id:1,text:'第1段'},
          {id:2,text:'第2段'},
          {id:3,text:'第3段'},
        ]
      }
    }
  }
</script>
<style scoped>
</style>

父组件

<template>
  <div>
    <h2>首页</h2>
    <router-link to="/home/details">跳转到详情</router-link>
    <p>父组件</p>
    <slotshow>
      <p>{{msg}}</p>
    </slotshow>
  </div>
</template>
<script>
  import slotshow from '../components/slotshow'
  export default{
    data(){
      return{
        msg:"测试内容"
      }
    },
    components:{
      slotshow
    }
  }
</script>
<style>
</style>

这种情况是如果要父组件在子组件中插入内容 ,必须要在子组件中声明slot 标签  ,如果子组件模板不包含<slot>插口,父组件的内容<p>{{msg}}</p>将会被丢弃。

 当slot存在默认值<slot><p>默认值</p></slot>,且父元素在<slotshow></slotshow>中没有要插入的内容时,会显示<p>默认值</p>(p标签会去掉),当slot存在默认值,且父元素在<child>中存在要插入的内容时,则显示父组件中设置的值,

具名slot

<slot> 元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素

var childNode = {
 template: `
 <div class="child">
 <p>子组件</p>
 <slot name="my-header">头部默认值</slot>
 <slot name="my-body">主体默认值</slot>
 <slot name="my-footer">尾部默认值</slot>
 </div>
 `,
};

var parentNode = {
 template: `
 <div class="parent">
 <p>父组件</p>
 <child>
 <p slot="my-header">我是头部</p>
 <p slot="my-footer">我是尾部</p>
 </child>
 </div>
 `,
 components: {
 'child': childNode
 },
};

vue 组件中slot插口的具体用法

仍然可以有一个匿名 slot,它是默认 slot,作为找不到匹配的内容片段的备用插槽。匿名slot只能作为没有slot属性的元素的插槽,有slot属性的元素如果没有配置slot,则会被抛弃

var childNode = {
 template: `
 <div class="child">
 <p>子组件</p>
 <slot name="my-body">主体默认值</slot>
 <slot></slot>
 </div>
 `,
};

var parentNode = {
 template: `
 <div class="parent">
 <p>父组件</p>
 <child>
 <p slot="my-body">我是主体</p>
 <p>我是其他内容</p>
 <p slot="my-footer">我是尾部</p>
 </child>
 </div>
 `,
 components: {
 'child': childNode
 },
};
<p slot="my-body">插入<slot name="my-body">中,<p>我是其他内容</p>插入<slot>中,而<p slot="my-footer">被丢弃

vue 组件中slot插口的具体用法

如果没有默认的 slot,这些找不到匹配的内容片段也将被抛弃

var childNode = {
 template: `
 <div class="child">
 <p>子组件</p>
 <slot name="my-body">主体默认值</slot>
 </div>
 `,
};

var parentNode = {
 template: `
 <div class="parent">
 <p>父组件</p>
 <child>
 <p slot="my-body">我是主体</p>
 <p>我是其他内容</p>
 <p slot="my-footer">我是尾部</p>
 </child>
 </div>
 `,
 components: {
 'child': childNode
 },
};
<p>我是其他内容</p>和<p slot="my-footer">都被抛弃

vue 组件中slot插口的具体用法

作用域插槽

作用域插槽是一种特殊类型的插槽,用作使用一个 (能够传递数据到) 可重用模板替换已渲染元素。

在子组件中,只需将数据传递到插槽,就像将 props 传递给组件一样

<span style="font-size: 16px"><div class="child">
 <slot text="hello from child"></slot>
</div></span>

在父级中,具有特殊属性 scope 的 <template> 元素必须存在,表示它是作用域插槽的模板。scope 的值对应一个临时变量名,此变量接收从子组件中传递的 props 对象.

var <span style="color: #ffffff">childNode</span> = {
 template: `
 <div class="child">
 <p>子组件</p>
 <slot xxx="hello from child"></slot>
 </div>
 `,
};
var parentNode = {
 template: `
 <div class="parent">
 <p>父组件</p>
 <child>
 <template scope="props">
 <p>hello from parent</p>
 <p>{{ props.xxx }}</p>
 </template>
 </child>
 </div>
 `,
 components: {
 'child': childNode
 },
};

如果渲染以上结果,得到的输出是

vue 组件中slot插口的具体用法

【列表组件】

作用域插槽更具代表性的用例是列表组件,允许组件自定义应该如何渲染列表每一项

var childNode = {
 template: `
 <ul>
 <slot name="item" v-for="item in items" :text="item.text">默认值</slot>
 </ul>
 `,
 data(){
 return{
 items:[
 {id:1,text:'第1段'},
 {id:2,text:'第2段'},
 {id:3,text:'第3段'},
 ]
 }
 }
};

var parentNode = {
 template: `
 <div class="parent">
 <p>父组件</p>
 <child>
 <template slot="item" scope="props">
 <li>{{ props.text }}</li>
 </template>
 </child>
 </div>
 `,
 components: {
 'child': childNode
 },
};

vue 组件中slot插口的具体用法 

总结

以上所述是小编给大家介绍的vue 中slot 的具体用法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JSON 数字排序多字段排序介绍
Sep 18 Javascript
JavaScript DOM节点添加示例
Jul 16 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
Sep 25 Javascript
jquery图片切换插件
Mar 16 Javascript
JavaScript字符串常用类使用方法汇总
Apr 14 Javascript
Jquery日期选择datepicker插件用法实例分析
Jun 08 Javascript
ES6记录异步函数的执行时间详解
Aug 31 Javascript
React Native 使用Fetch发送网络请求的示例代码
Dec 02 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
Dec 06 Javascript
微信小程序基于高德地图查找位置并显示文字
Oct 30 Javascript
Node.js API详解之 repl模块用法实例分析
May 25 Javascript
前端JavaScript大管家 package.json
Nov 02 Javascript
react 实现页面代码分割、按需加载的方法
Apr 03 #Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 #Javascript
使用FileReader API创建Vue文件阅读器组件
Apr 03 #Javascript
vue内置指令详解
Apr 03 #Javascript
详解在React里使用&quot;Vuex&quot;
Apr 02 #Javascript
Angular2进阶之如何避免Dom误区
Apr 02 #Javascript
Vue项目分环境打包的实现步骤
Apr 02 #Javascript
You might like
第十四节 命名空间 [14]
2006/10/09 PHP
WIFI万能钥匙密码查询接口实例
2015/09/28 PHP
详解WordPress中用于更新和获取用户选项数据的PHP函数
2016/03/08 PHP
csdn 博客中实现运行代码功能实现
2009/08/29 Javascript
基于jquery 的一个progressbar widge
2010/10/29 Javascript
js this函数调用无需再次抓获id,name或标签名
2014/03/03 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
2014/06/07 Javascript
jQuery异步获取json数据方法汇总
2014/12/22 Javascript
JavaScript中判断数据类型的方法总结
2016/05/24 Javascript
EasyUI创建对话框的两种方式
2016/08/23 Javascript
VueJS事件处理器v-on的使用方法
2017/09/27 Javascript
jquery实现图片跟随鼠标的实例
2017/10/17 jQuery
爬虫利器Puppeteer实战
2019/01/09 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
详解JavaScript执行模型
2020/11/16 Javascript
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
python的几种开发工具介绍
2007/03/07 Python
python中的yield使用方法
2014/02/11 Python
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
pyqt5让图片自适应QLabel大小上以及移除已显示的图片方法
2019/06/21 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
2020/02/15 Python
如何使用python的ctypes调用医保中心的dll动态库下载医保中心的账单
2020/05/24 Python
中国最大的团购网站:聚划算
2016/09/21 全球购物
美国最大的高尔夫发球时间预订网站:TeeOff.com
2018/03/28 全球购物
大学生求职信范文应怎么写
2014/01/01 职场文书
基层党组织建设整改方案
2014/09/16 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2014年党务工作总结
2014/11/25 职场文书
趣味运动会开幕词
2015/01/28 职场文书
国庆庆典邀请函
2015/02/02 职场文书
首席执行官观后感
2015/06/03 职场文书
Flask使用SQLAlchemy实现持久化数据
2021/07/16 Python
「魔导具师妲莉亚永不妥协~从今天开始的自由职人生活~」1、2卷发售宣传CM公开
2022/03/21 日漫