Vue中插槽slot的使用方法与应用场景详析


Posted in Vue.js onJune 08, 2021

什么是插槽?

我们知道在Vue中 Child 组件的标签 的中间是不可以包着什么的 。

Vue中插槽slot的使用方法与应用场景详析

可是往往在很多时候我们在使用组件的时候总想在组件间外面自定义一些标签,vue新增了一种插槽机制,叫做作用域插槽。要求的版本是2.1.0+;

插槽,其实就相当于占位符。它在组件中给你的HTML模板占了一个位置,让你来传入一些东西。插槽又分为 匿名插槽、具名插槽、作用域插槽。

在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope

匿名插槽

匿名插槽,我们也可以叫它单个插槽或者默认插槽。和具名插槽相对,它是不需要设置 name 属性的,它隐藏的name属性为default。

father.vue

Vue中插槽slot的使用方法与应用场景详析

child.vue

Vue中插槽slot的使用方法与应用场景详析

匿名插槽,name的属性对应的是 default 也可以不写就是默认的意思啦;

在使用的时候还有一个问题要注意的 如果是有2个以上的匿名插槽是会child标签里面的内容全部都替换到每个slot;

具名插槽 (vue2.6.0+被废弃的slot='name')

顾名思义就是slot 是带有name的 ,定义:  或者使用简单缩写的定义 #header 使用:要用一个 template标签包裹

father.vue

Vue中插槽slot的使用方法与应用场景详析

child.vue

Vue中插槽slot的使用方法与应用场景详析

这里说一下多个具名插槽的使用 多个具名插槽,插槽的位置不是使用插槽的位置而定的,是在定义的时候的位置来替换的

father.vue

Vue中插槽slot的使用方法与应用场景详析

child.vue

Vue中插槽slot的使用方法与应用场景详析

作用域插槽

就是用来传递数据的插槽

当你想在一个插槽中使用数据时,要注意一个问题作用域的问题,Vue 官方文档中说了父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的;

为了让 子组件中的数据 在父级的插槽 内容中可用我们可以将 数据 作为 元素的一个特性绑定上去: v-bind:text="text"

注意:

匿名的作用域插槽和具名的作用域插槽 区别在v-slot:defult="接受的名称"(defult(匿名的可以不写,具名的相反要写的是对应的name))

v-solt可以解构接收 解构接收的字段要和传的字段一样才可以 例如 :one 对应 v-slot="{one}"

Vue中插槽slot的使用方法与应用场景详析

效果图

Vue中插槽slot的使用方法与应用场景详析

总结

到此这篇关于Vue中插槽slot的使用方法与应用场景的文章就介绍到这了,更多相关Vue插槽slot用法内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
vue 组件基础知识总结
Jan 26 Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
vue backtop组件的实现完整代码
Apr 07 Vue.js
深入理解Vue的数据响应式
May 15 Vue.js
vue-element-admin项目导入和导出的实现
May 21 Vue.js
关于Vue中的options选项
Mar 22 Vue.js
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
vue实现登陆页面开发实践
May 30 Vue.js
vue+elementui 实现新增和修改共用一个弹框的完整代码
解决vue $http的get和post请求跨域问题
vue Element-ui表格实现树形结构表格
Jun 07 #Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 #Vue.js
vue响应式原理与双向数据的深入解析
vue实现水波涟漪效果的点击反馈指令
vue 实现上传组件
May 31 #Vue.js
You might like
Memcache 在PHP中的使用技巧
2010/02/08 PHP
php使用正则过滤js脚本代码实例
2014/05/10 PHP
php 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
php文件下载处理方法分析
2015/04/22 PHP
PHP输入输出流学习笔记
2015/05/12 PHP
PHP编程开发怎么提高编程效率 提高PHP编程技术
2015/11/09 PHP
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
node.js中的fs.write方法使用说明
2014/12/15 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
jQuery判断一个元素是否可见的方法
2015/06/05 Javascript
jQuery实现为图片添加镜头放大效果的方法
2015/06/25 Javascript
JavaScript实现select添加option
2015/07/03 Javascript
JavaScript数组合并的多种方法
2016/05/22 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
vue.js父子组件通信动态绑定的实例
2018/09/28 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
2020/11/19 Vue.js
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
[01:06:42]VP vs NewBee Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
python中redis查看剩余过期时间及用正则通配符批量删除key的方法
2018/07/30 Python
Python线程threading模块用法详解
2020/02/26 Python
Ubuntu配置Pytorch on Graph (PoG)环境过程图解
2020/11/19 Python
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
碧欧泉美国官网:Biotherm美国
2016/08/31 全球购物
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
北京某科技有限公司C# .net笔试题
2014/09/27 面试题
小学校长汇报材料
2014/08/20 职场文书
演讲稿开场白台词
2014/08/25 职场文书
甲乙双方合作协议书
2014/10/13 职场文书
2014年银行个人工作总结
2014/12/05 职场文书
驾驶员管理制度范本
2015/08/06 职场文书