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 select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
Dec 19 Javascript
用js实现的自定义的对话框的实现代码
Mar 21 Javascript
js螺旋动画效果的具体实例
Nov 15 Javascript
JavaScript实现网页加载进度条代码超简单
Sep 21 Javascript
详解JavaScript函数
Dec 01 Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 Javascript
JS获取复选框的值,并传递到后台的实现方法
May 30 Javascript
基于bootstrap实现广告轮播带图片和文字效果
Jul 22 Javascript
js对字符串进行编码的方法总结(推荐)
Nov 10 Javascript
angular学习之动态创建表单的方法
Dec 07 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
Jan 05 Javascript
通过angular CDK实现页面元素拖放的步骤详解
Jul 01 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设计模式 Mediator (中介者模式)
2011/06/26 PHP
phpmyadmin打开很慢的解决方法
2014/04/21 PHP
php提高网站效率的技巧
2015/09/29 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
PHP面向对象程序设计__tostring()和__invoke()用法分析
2019/06/12 PHP
js event事件的传递与冒泡处理
2009/12/06 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
jQuery实现表单步骤流程导航代码分享
2015/08/28 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
JavaScript仿网易选项卡制作代码
2016/10/06 Javascript
详解js数组的完全随机排列算法
2016/12/16 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
2017/01/20 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
node.js中grunt和gulp的区别详解
2017/07/17 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
2017/09/19 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
2018/11/15 Javascript
[06:37]2014DOTA2国际邀请赛 昔日王者渴望重回巅峰
2014/07/12 DOTA
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
[45:25]完美世界DOTA2联赛循环赛 PXG vs IO 第一场 11.06
2020/11/09 DOTA
[51:39]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第二场 2月7日
2021/03/11 DOTA
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
PyMongo安装使用笔记
2015/04/27 Python
Flask框架各种常见装饰器示例
2018/07/17 Python
Django实现auth模块下的登录注册与注销功能
2019/10/10 Python
python3反转字符串的3种方法(小结)
2019/11/07 Python
python线程信号量semaphore使用解析
2019/11/30 Python
python中二分查找法的实现方法
2020/12/06 Python
css3中背景尺寸background-size详解
2014/09/02 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
英国户外服装、鞋类和设备的领先零售商:Millets
2020/10/12 全球购物
山海经纬软件测试笔试题和面试题
2013/04/02 面试题
社会公德演讲稿
2014/05/20 职场文书
南极大冒险观后感
2015/06/05 职场文书
php引用传递
2021/04/01 PHP