vue中slot(插槽)的介绍与使用


Posted in Javascript onNovember 12, 2018

什么是插槽?

插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制

Vue slot 原理

在web-components中有slot的概念,https://developers.google.com/web/fundamentals/web-components/shadowdom。

<slot> 元素

Shadow DOM 使用 <slot> 元素将不同的 DOM 树组合在一起。Slot 是组件内部的占位符,用户可以使用自己的标记来填充。

通过定义一个或多个 slot,您可将外部标记引入到组件的 shadow DOM 中进行渲染。 这相当于您在说“在此处渲染用户的标记”。

注:Slot 是为网络组件创建“声明性 API”的一种方法。它们混入到用户的 DOM 中,帮助对整个组件进行渲染,从而将不同的 DOM 树组合在一起。

怎么用插槽?

默认插槽

父组件

<template>
 <div>
 我是父组件
 <slotOne1>
  <p style="color:red">我是父组件插槽内容</p>
 </slotOne1>
 </div>
</template>

在父组件引用的子组件中写入想要显示的内容(可以使用标签,也可以不用)

子组件(slotOne1)

<template>
 <div class="slotOne1">
 <div>我是slotOne1组件</div>
 <slot></slot>
 </div>
</template>

在子组件中写入slot,slot所在的位置就是父组件要显示的内容

vue中slot(插槽)的介绍与使用

当然再父组件引用的子组件中也可以写入其他组件

父组件

<template>
 <div>
 我是父组件
 <slotOne1>
  <p style="color:red">我是父组件插槽内容</p>
  <slot-one2></slot-one2>
 </slotOne1>
 </div>
</template>

子组件(slotOne2)

<template>
 <div class="slotOne2">
 我是slotOne2组件
 </div>
</template>

vue中slot(插槽)的介绍与使用

具名插槽

子组件

<template>
 <div class="slottwo">
 <div>slottwo</div>
 <slot name="header"></slot>
 <slot></slot>
 <slot name="footer"></slot>
 </div>
</template>

在子组件中定义了三个slot标签,其中有两个分别添加了name属性header和footer

父组件

<template>
 <div>
 我是父组件
 <slot-two>
  <p>啦啦啦,啦啦啦,我是卖报的小行家</p>
  <template slot="header">
   <p>我是name为header的slot</p>
  </template>
  <p slot="footer">我是name为footer的slot</p>
 </slot-two>
 </div>
</template>

在父组件中使用template并写入对应的slot值来指定该内容在子组件中现实的位置(当然也不用必须写到template),没有对应值的其他内容会被放到子组件中没有添加name属性的slot中

vue中slot(插槽)的介绍与使用

插槽的默认内容

父组件

<template>
 <div>
 我是父组件
 <slot-two></slot-two>
 </div>
</template>

子组件

<template>
 <div class="slottwo">
 <slot>我不是卖报的小行家</slot>
 </div>
</template>

可以在子组件的slot标签中写入内容,当父组件没有写入内容时会显示子组件的默认内容,当父组件写入内容时,会替换子组件的默认内容

vue中slot(插槽)的介绍与使用

编译作用域

父组件

<template>
 <div>
 我是父组件
 <slot-two>
  <p>{{name}}</p>
 </slot-two>
 </div>
</template>
<script>
export default {
 data () {
 return {
  name: 'Jack'
 }
 }
}
</script>

子组件

<template>
 <div class="slottwo">
 <slot></slot>
 </div>
</template>

vue中slot(插槽)的介绍与使用

作用域插槽

子组件

<template>
 <div>
 我是作用域插槽的子组件
 <slot :data="user"></slot>
 </div>
</template>

<script>
export default {
 name: 'slotthree',
 data () {
 return {
  user: [
  {name: 'Jack', sex: 'boy'},
  {name: 'Jone', sex: 'girl'},
  {name: 'Tom', sex: 'boy'}
  ]
 }
 }
}
</script>

在子组件的slot标签上绑定需要的值

父组件

<template>
 <div>
 我是作用域插槽
 <slot-three>
  <template slot-scope="user">
  <div v-for="item in user.data" :key="item.id">
  {{item}}
  </div>
  </template>
 </slot-three>
 </div>
</template>

在父组件上使用slot-scope属性,user.data就是子组件传过来的值

vue中slot(插槽)的介绍与使用

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascipt匹配单行和多行注释的正则表达式
Nov 20 Javascript
JavaScript设计模式之外观模式介绍
Dec 28 Javascript
详解JavaScript时间格式化
Dec 23 Javascript
原生JS实现图片左右轮播
Dec 30 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
Feb 13 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
使用微信小程序开发弹出框应用实例详解
Oct 18 Javascript
深入浅析Vue 中 ref 的使用
Apr 29 Javascript
100行代码实现vue表单校验功能(小白自编)
Nov 19 Javascript
Javascript如何实现双指控制图片功能
Feb 25 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
Apr 17 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
Oct 26 Javascript
vuex的module模块用法示例
Nov 12 #Javascript
React手稿之 React-Saga的详解
Nov 12 #Javascript
基于游标的分页接口实现代码示例
Nov 12 #Javascript
React Hooks的深入理解与使用
Nov 12 #Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 #Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 #jQuery
微信小程序左滑删除功能开发案例详解
Nov 12 #Javascript
You might like
php session处理的定制
2009/03/16 PHP
PHP的SQL注入过程分析
2012/01/06 PHP
php发送post请求的三种方法
2014/02/11 PHP
深入剖析浏览器退出之后php还会继续执行么
2016/05/17 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
javascript生成随机颜色示例代码
2014/05/05 Javascript
使用forever管理nodejs应用教程
2014/06/03 NodeJs
JavaScript 常见安全漏洞和自动化检测技术
2015/08/21 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
JavaScript表单验证完美代码
2017/03/02 Javascript
jQuery鼠标移动图片上实现放大效果
2017/06/25 jQuery
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
vue 实现把路由单独分离出来
2020/08/13 Javascript
swiperjs实现导航与tab页的联动
2020/12/13 Javascript
Python中使用haystack实现django全文检索搜索引擎功能
2017/08/26 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
安装docker-compose的两种最简方法
2019/07/30 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
Python 实现 T00ls 自动签到脚本代码(邮件+钉钉通知)
2020/07/06 Python
Python unittest生成测试报告过程解析
2020/09/08 Python
如何利用python检测图片是否包含二维码
2020/10/15 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
C#软件工程师英语面试题
2015/06/07 面试题
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
经理管理专业自荐信范文
2013/12/31 职场文书
毕业生就业意向书
2014/04/01 职场文书
早读课迟到检讨书
2014/09/25 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
2014年酒店服务员工作总结
2014/12/08 职场文书
高三语文复习计划
2015/01/19 职场文书
成绩单家长意见
2015/06/03 职场文书
二婚主持词
2015/06/30 职场文书