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 相关文章推荐
Javascript中的常见排序算法
Mar 27 Javascript
javascript 二进制运算技巧解析
Nov 27 Javascript
Jquery网页出现的乱码问题的三种解决方法
Jun 30 Javascript
详解jquery uploadify 上传文件
Nov 09 Javascript
javascript操作字符串的原生方法
Dec 22 Javascript
小米公司JavaScript面试题
Dec 29 Javascript
jQuery制作拼图小游戏
Jan 12 Javascript
实例代码详解jquery.slides.js
Nov 16 Javascript
微信小程序之蓝牙的链接
Sep 26 Javascript
如何从零开始手写Koa2框架
Mar 22 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 Javascript
详解JavaScript数据类型和判断方法
Sep 04 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+mysql写的留言本
2006/10/09 PHP
PHP 截取字符串函数整理(支持gb2312和utf-8)
2010/02/16 PHP
基于PHP的简单采集数据入库程序【续篇】
2014/07/30 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
将PHP的session数据存储到数据库中的代码实例
2016/06/24 PHP
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
js 限制input只能输入数字、字母和汉字等等
2013/12/18 Javascript
node.js正则表达式获取网页中所有链接的代码实例
2014/06/03 Javascript
javascript从image转换为base64位编码的String
2014/07/29 Javascript
jquery实现右键菜单插件
2015/03/29 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
jQuery Ajax使用FormData对象上传文件的方法
2016/09/07 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
2016/12/08 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
2017/04/13 Javascript
jQuery实现的简单对话框拖动功能示例
2018/06/05 jQuery
如何使用puppet替换文件中的string
2018/12/06 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
vue实现商城秒杀倒计时功能
2019/12/12 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
2020/12/03 Javascript
python实现apahce网站日志分析示例
2014/04/02 Python
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
python检查URL是否正常访问的小技巧
2017/02/25 Python
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
Python基于列表list实现的CRUD操作功能示例
2018/01/05 Python
Python高级特性与几种函数的讲解
2019/03/08 Python
python3获取当前目录的实现方法
2019/07/29 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
红楼梦读书笔记
2015/06/25 职场文书
人身损害赔偿协议书
2016/03/22 职场文书