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中通过render函数给子组件设置ref操作
Nov 17 Vue.js
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
Vue $attrs & inheritAttr实现button禁用效果案例
Dec 07 Vue.js
vue+element UI实现树形表格
Dec 29 Vue.js
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
一定要知道的 25 个 Vue 技巧
Nov 02 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
php入门学习知识点一 PHP与MYSql连接与查询
2011/07/14 PHP
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
微信API接口大全
2015/04/15 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
别了 JavaScript中的isXX系列
2012/08/01 Javascript
jquery插件制作 自增长输入框实现代码
2012/08/17 jQuery
jquery中交替点击事件的实现代码
2014/02/14 Javascript
JavaScript中的闭包(Closure)详细介绍
2014/12/30 Javascript
js实现带按钮的上下滚动效果
2015/05/12 Javascript
使用js复制链接中的部分文字的方法
2015/07/30 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
2015/10/31 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
2016/08/15 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
2017/03/03 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
React Native仿美团下拉菜单的实例代码
2017/08/08 Javascript
详解require.js配置路径的用法和css的引入
2017/09/06 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
js实现菜单跳转效果
2020/12/11 Javascript
Python 网络编程起步(Socket发送消息)
2008/09/06 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
2019/03/30 Python
python语言元素知识点详解
2019/05/15 Python
Python直接赋值、浅拷贝与深度拷贝实例分析
2019/06/18 Python
linux中如何使用python3获取ip地址
2019/07/15 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
医学院毕业生自荐信
2013/11/08 职场文书
我的五年职业生涯规划
2014/01/23 职场文书
助人为乐好少年事迹材料
2014/08/18 职场文书
个人授权委托书样本
2014/09/13 职场文书
辞职信格式模板
2015/02/27 职场文书
广播体操比赛主持词
2015/06/29 职场文书
浅谈Python中的正则表达式
2021/06/28 Python
SpringCloud Feign请求头删除修改的操作代码
2022/03/20 Java/Android