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 相关文章推荐
你的编程语言可以这样做吗?
Sep 07 Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 Javascript
jquery禁止回车触发表单提交
Dec 12 Javascript
javascript下拉列表中显示树形菜单的实现方法
Nov 17 Javascript
学习vue.js中class与style绑定
Dec 03 Javascript
js实现带缓动动画的导航栏效果
Jan 16 Javascript
关于vue.js发布后路径引用的问题解决
Aug 15 Javascript
在Swiper内如何制作CSS3动画效果示例代码
Dec 07 Javascript
通过js动态创建标签,并设置属性方法
Feb 24 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 Javascript
jQuery实现动态加载瀑布流
Sep 01 jQuery
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
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
详解WordPress中调用评论模板和循环输出评论的PHP函数
2016/01/05 PHP
深入解析PHP中SESSION反序列化机制
2017/03/01 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
json原理分析及实例介绍
2012/11/29 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
2014/05/29 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
2015/01/09 Javascript
javascript中eval函数用法分析
2015/04/25 Javascript
jQuery根据name属性进行查找的用法分析
2016/06/23 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
2016/11/27 Javascript
加载 vue 远程代码的组件实例详解
2017/11/20 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
深入浅析Vue中的 computed 和 watch
2018/06/06 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
2018/11/14 Javascript
利用Webpack实现小程序多项目管理的方法
2019/02/25 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
Vue 样式切换及三元判断样式关联操作
2020/08/09 Javascript
详细讲解用Python发送SMTP邮件的教程
2015/04/29 Python
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
python安装PIL模块时Unable to find vcvarsall.bat错误的解决方法
2016/09/19 Python
python利用正则表达式搜索单词示例代码
2017/09/24 Python
Python使用装饰器进行django开发实例代码
2018/02/06 Python
Python中fnmatch模块的使用详情
2018/11/30 Python
Django Form 实时从数据库中获取数据的操作方法
2019/07/25 Python
解决Jupyter因卸载重装导致的问题修复
2020/04/10 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
python 第三方库paramiko的常用方式
2021/02/20 Python
HTML5之多线程(Web Worker)
2019/01/02 HTML / CSS
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
美国伴娘礼服商店:Evening Collective
2019/10/07 全球购物
环境科学专业大学生自荐信格式
2013/09/21 职场文书
财务简历的自我评价
2014/03/05 职场文书
机关党员2014全国两会学习心得体会
2014/03/10 职场文书
高一学生期末评语
2014/04/25 职场文书
Python中threading库实现线程锁与释放锁
2021/05/17 Python