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+vant实现购物车全选和反选功能
Nov 17 Vue.js
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
详解Vue中的自定义指令
Dec 07 Vue.js
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
Vue中computed和watch有哪些区别
Dec 19 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
vue实现树状表格效果
Dec 29 Vue.js
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
vue代码分块和懒加载非必要资源文件
Apr 11 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
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
基于mysql的论坛(5)
2006/10/09 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
Javascript模块化编程(三)require.js的用法及功能介绍
2013/01/17 Javascript
js读取注册表的键值示例
2013/09/25 Javascript
深入探讨JavaScript String对象
2015/03/09 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
微信小程序实现下载进度条的方法
2017/12/08 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
2018/01/22 Javascript
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
浅谈Postman解决token传参的问题
2018/03/31 Javascript
Vue隐藏显示、只读实例代码
2018/07/18 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
JavaScript多种图形实现代码实例
2020/06/28 Javascript
[01:57]2018DOTA2亚洲邀请赛赛前采访-iG
2018/04/03 DOTA
python类的继承实例详解
2017/03/30 Python
Python中的并发处理之asyncio包使用的详解
2018/04/03 Python
Python实现的堆排序算法示例
2018/04/29 Python
python将.ppm格式图片转换成.jpg格式文件的方法
2018/10/27 Python
python执行CMD指令,并获取返回的方法
2018/12/19 Python
Python 批量读取文件中指定字符的实现
2020/03/06 Python
Python telnet登陆功能实现代码
2020/04/16 Python
python使用numpy中的size()函数实例用法详解
2021/01/29 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
html5绘制时钟动画
2014/12/15 HTML / CSS
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
审核会计岗位职责
2013/11/08 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
目标责任书格式范文
2015/05/11 职场文书
2015年小学美术工作总结
2015/05/25 职场文书
浅谈Python numpy创建空数组的问题
2021/05/25 Python
CPU不支持Windows11系统怎么办
2021/11/21 数码科技
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis