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 相关文章推荐
JavaScript实现动态增加文件域表单
Feb 12 Javascript
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
jquery easyui的tabs使用时的问题
Mar 23 Javascript
如何使用json在前后台进行数据传输实例介绍
Apr 11 Javascript
用Javascript获取页面元素的具体位置
Dec 09 Javascript
JavaScript闭包详解
Feb 02 Javascript
JavaScript判断按钮被点击的方法
Dec 13 Javascript
javascript瀑布流布局实现方法详解
Feb 17 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
Apr 21 Javascript
element-ui upload组件多文件上传的示例代码
Oct 17 Javascript
JS常见内存泄漏及解决方案解析
May 30 Javascript
jQuery实现回到顶部效果
Oct 19 jQuery
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
PHP删除HTMl标签的三种解决方法
2013/06/30 PHP
解析WordPress中的post_class与get_post_class函数
2016/01/04 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
laravel 解决groupBy时出现的错误 isn't in Group By问题
2019/10/17 PHP
JQuery的Validation插件中Remote验证的中文问题
2010/07/26 Javascript
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
JS获取节点的兄弟,父级,子级元素的方法
2014/01/09 Javascript
Jquery操作js数组及对象示例代码
2014/05/11 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
2015/12/03 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
JS重载实现方法分析
2016/12/16 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
[03:48]显微镜下的DOTA2第四期——TP动作
2014/06/20 DOTA
[43:49]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
CentOS安装pillow报错的解决方法
2016/01/27 Python
Django使用httpresponse返回用户头像实例代码
2018/01/26 Python
python实现图像识别功能
2018/01/29 Python
cmd运行python文件时对结果进行保存的方法
2018/05/16 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
解决python执行较大excel文件openpyxl慢问题
2020/05/15 Python
特罗佩亚包官方网站:Tropea
2017/01/03 全球购物
美国网上购买眼镜:Eyeconic
2017/07/29 全球购物
新西兰最大的连锁超市:Countdown
2020/06/04 全球购物
企业管理部经理岗位职责
2013/12/24 职场文书
《蚂蚁和蝈蝈》教学反思
2014/02/24 职场文书
反对邪教标语
2014/06/30 职场文书
无房证明范本
2014/09/17 职场文书
2014年话务员工作总结
2014/11/19 职场文书
公司股份合作协议书
2014/12/07 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书
python和Appium的移动端多设备自动化测试框架
2022/04/26 Python
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers