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 相关文章推荐
js onload处理html页面加载之后的事件
Oct 30 Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 Javascript
javascript每日必学之条件分支
Feb 17 Javascript
javascript实现数组去重的多种方法
Mar 14 Javascript
jQuery实现磁力图片跟随效果完整示例
Sep 16 Javascript
最实用的jQuery分页插件
Oct 09 Javascript
javascript prototype原型详解(比较基础)
Dec 26 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 Javascript
js序列化和反序列化的使用讲解
Jan 19 Javascript
Layui数据表格 前后端json数据接收的方法
Sep 19 Javascript
关于vue组件事件属性穿透详解
Oct 28 Javascript
JavaScript+HTML实现学生信息管理系统
Apr 20 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
Zerg剧情介绍
2020/03/14 星际争霸
php文档更新介绍
2011/07/22 PHP
利用php的ob缓存机制实现页面静态化方法
2017/07/09 PHP
PHP测试框架PHPUnit组织测试操作示例
2018/05/28 PHP
workerman结合laravel开发在线聊天应用的示例代码
2018/10/30 PHP
优秀js开源框架-jQuery使用手册(1)
2007/03/10 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
2010/03/16 Javascript
js 格式化时间日期函数小结
2010/03/20 Javascript
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
2015/04/16 Javascript
跟我学习javascript的定时器
2015/11/19 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
js实现截图保存图片功能的代码示例
2017/02/16 Javascript
微信小程序开发之toast等弹框提示使用教程
2017/06/08 Javascript
Vue自定义指令详解
2017/07/28 Javascript
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
Vue.js 十五分钟入门图文教程
2018/09/12 Javascript
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
Python魔术方法详解
2015/02/14 Python
利用ctypes提高Python的执行速度
2016/09/09 Python
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
python调用百度语音识别api
2018/08/30 Python
解决python os.mkdir创建目录失败的问题
2018/10/16 Python
python导入pandas具体步骤方法
2019/06/23 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
html5调用摄像头功能的实现代码
2018/05/07 HTML / CSS
亚瑟士美国官网:ASICS美国
2017/02/01 全球购物
俄罗斯购买剧院和演唱会门票网站:Parter.ru
2019/11/09 全球购物
一篇文章弄懂MySQL查询语句的执行过程
2021/05/07 MySQL
基于tensorflow权重文件的解读
2021/05/26 Python