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 相关文章推荐
IE 下的只读 innerHTML
Aug 21 Javascript
vs2003 js文件编码问题的解决方法
Mar 20 Javascript
用Javascript获取页面元素的具体位置
Dec 09 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 Javascript
JavaScript html5 canvas绘制时钟效果
Mar 01 Javascript
vue.js学习笔记:如何加载本地json文件
Jan 17 Javascript
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
React-Native中props具体使用详解
Sep 04 Javascript
使用Electron构建React+Webpack桌面应用的方法
Dec 15 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 Javascript
create-react-app中添加less支持的实现
Nov 15 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
Feb 27 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
Oracle Faq(Oracle的版本)
2006/10/09 PHP
PHP 全角转半角实现代码
2010/05/16 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
jQuery中:disabled选择器用法实例
2015/01/04 Javascript
JavaScript数据结构和算法之二叉树详解
2015/02/11 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
2016/05/31 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
Bootstrap源码学习笔记之bootstrap进度条
2016/12/24 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
浅析JS中什么是自定义react数据验证组件
2018/10/19 Javascript
Vue 中如何正确引入第三方模块的方法步骤
2019/05/05 Javascript
Vue实现搜索结果高亮显示关键字
2019/05/28 Javascript
微信小程序 自定义弹窗实现过程(附代码)
2019/12/05 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
2020/05/20 Javascript
Python模拟三级菜单效果
2017/09/11 Python
Python使用pydub库对mp3与wav格式进行互转的方法
2019/01/10 Python
解决pyinstaller打包发布后的exe文件打开控制台闪退的问题
2019/06/21 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
基于Python 中函数的 收集参数 机制
2019/12/21 Python
python中数字是否为可变类型
2020/07/08 Python
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
2014/06/11 HTML / CSS
Pedro官网:新加坡时尚品牌
2019/08/27 全球购物
关于赌博的检讨书
2014/01/08 职场文书
完美主义个人的自我评价
2014/02/17 职场文书
2014年作风建设工作总结
2014/10/29 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
演讲开场白台词大全
2015/05/29 职场文书
导游词之青城山景区
2019/09/27 职场文书
Windows server 2012 配置Telnet以及用法详解
2022/04/28 Servers
python+opencv实现目标跟踪过程
2022/06/21 Python
react中useState使用:如何实现在当前表格直接更改数据
2022/08/05 Javascript