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 继承详解(二)
Jul 13 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
Jan 06 Javascript
js实现select跳转功能代码
Oct 22 Javascript
JavaScript操作选择对象的简单实例
May 16 Javascript
prototype.js常用函数详解
Jun 18 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
Oct 13 Javascript
jQuery获取随机颜色的实例代码
May 21 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
vue强制刷新组件的方法示例
Feb 28 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
May 18 Javascript
jQuery 动态粒子效果示例代码
Jul 07 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 disk_free_space 返回目录可用空间
2010/05/10 PHP
php中http与https跨域共享session的解决方法
2014/12/20 PHP
php实现搜索类封装示例
2016/03/31 PHP
php和asp语法上的区别总结
2019/05/12 PHP
thinkPHP5框架路由常用知识点汇总
2019/09/15 PHP
jQuery Ajax 全解析
2009/02/08 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
基于javascript数组实现图片轮播
2016/05/02 Javascript
JavaScript实现简单的日历效果
2016/09/25 Javascript
详解vue组件化开发-vuex状态管理库
2017/04/10 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
2018/11/09 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
2020/08/14 Javascript
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
python获取文件扩展名的方法
2015/07/06 Python
Python快速从注释生成文档的方法
2016/12/26 Python
Python实现爬取需要登录的网站完整示例
2017/08/19 Python
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
Python实现自定义函数的5种常见形式分析
2018/06/16 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
如何用Python来理一理红楼梦里的那些关系
2019/08/14 Python
Python基于类路径字符串获取静态属性
2020/03/12 Python
利用CSS3实现文字折纸效果实例代码
2018/07/10 HTML / CSS
英语老师推荐信
2014/02/26 职场文书
员工考核评语大全
2014/04/26 职场文书
董事长秘书工作职责
2014/06/10 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
拾金不昧表扬信
2015/01/16 职场文书
导游词之江南周庄
2019/12/06 职场文书
Python 中的单分派泛函数你真的了解吗
2021/06/22 Python
Golang 实现 WebSockets 之创建 WebSockets
2022/04/24 Golang