vue插槽实例(Vue中插槽slot的使用方法与应用场景详析)
vue插槽实例
Vue中插槽slot的使用方法与应用场景详析什么是插槽?
我们知道在Vue中 Child 组件的标签 的中间是不可以包着什么的 。
可是往往在很多时候我们在使用组件的时候总想在组件间外面自定义一些标签,vue新增了一种插槽机制,叫做作用域插槽。要求的版本是2.1.0+;
插槽,其实就相当于占位符。它在组件中给你的HTML模板占了一个位置,让你来传入一些东西。插槽又分为 匿名插槽、具名插槽、作用域插槽。
在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope
匿名插槽
匿名插槽,我们也可以叫它单个插槽或者默认插槽。和具名插槽相对,它是不需要设置 name 属性的,它隐藏的name属性为default。
father.vue
child.vue
匿名插槽,name的属性对应的是 default 也可以不写就是默认的意思啦;
在使用的时候还有一个问题要注意的 如果是有2个以上的匿名插槽是会child标签里面的内容全部都替换到每个slot;
具名插槽 (vue2.6.0+被废弃的slot='name')
顾名思义就是slot 是带有name的 ,定义: 或者使用简单缩写的定义 #header 使用:要用一个 template标签包裹
father.vue
child.vue
这里说一下多个具名插槽的使用 多个具名插槽,插槽的位置不是使用插槽的位置而定的,是在定义的时候的位置来替换的
father.vue
child.vue
作用域插槽
就是用来传递数据的插槽
当你想在一个插槽中使用数据时,要注意一个问题作用域的问题,Vue 官方文档中说了父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的;
为了让 子组件中的数据 在父级的插槽 内容中可用我们可以将 数据 作为 元素的一个特性绑定上去: v-bind:text="text"
注意:
匿名的作用域插槽和具名的作用域插槽 区别在v-slot:defult="接受的名称"(defult(匿名的可以不写,具名的相反要写的是对应的name))
v-solt可以解构接收 解构接收的字段要和传的字段一样才可以 例如 :one 对应 v-slot="{one}"
效果图
总结
到此这篇关于Vue中插槽slot的使用方法与应用场景的文章就介绍到这了,更多相关Vue插槽slot用法内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
- vue基础语法对象(浅析从面向对象思维理解Vue组件)
- 数组循环遍历展示vue(Vue中foreach数组与js中遍历数组的写法说明)
- vuex中action的值怎么接(vuex中Getter的用法详解)
- google 调试vue(Vue实现Google第三方登录的示例代码)
- vue 怎么设置滚动条的长度(vue使用better-scroll实现横向滚动的方法实例)
- vue router用法(如何在Vue 3中扩展Vue Router链接详解)
- vue导出动态的excel功能(vue中如何下载excel流文件及设置下载文件名)
- vue.js 怎么做插件(Vue.js实现音乐播放器)
- vue中如何判断请求状态码(关于VUE的编译作用域及slot作用域插槽问题)
- vue怎么实现倒计时(Vue计时器的用法详解)
- vue端口号是什么原理(解决vue前后端端口不一致的问题)
- vue组件轮播(vue+rem自定义轮播图效果)
- vue怎么注册公共组件(解读Vue组件注册方式)
- vue轮播图代码(vue实现无缝轮播效果跑马灯)
- vue编程加入购物车(vuex实现简单的购物车功能)
- vue点击事件动态禁用(vue开发移动端使用better-scroll时click事件失效的解决方案)
- 15个新成 园 位置公布 深圳龙岗2022年共建花园建设又有大动作(15个新成园位置公布)
- 记者手记 书记带我去 巡街(记者手记书记带我去)
- 富士胶片集团将向土耳其东南部地震灾民捐赠5000万日元 | 美通社(富士胶片集团将向土耳其东南部地震灾民捐赠5000万日元)
- 二次创业 的富士胶片,在进博会上首次展示完成转型后的全线医疗产品(二次创业的富士胶片)
- 富士胶片 中国 我们对上海的信心没有任何改变(富士胶片中国)
- 赢麻了 富士公布2021年度财报 营利同比增长240(富士公布2021年度财报)
热门推荐
- 发送邮件的asp.net代码
- 虚拟主机干嘛用的(虚拟主机购买后怎么操作?)
- SqlServer 按时间段查询问题(SqlServer 按时间段查询问题)
- navicat如何连接服务器的数据库(Navicat如何远程连接云服务器数据库)
- 使用RouteDebugger对MVC路由进行调试
- navicat中如何使用sql语句(Navicat Premium操作MySQL数据库执行sql语句)
- javascript中的this判定(Javascript中函数分类&this指向的实例详解)
- SQL Union和Union All的用法和区别
- sql server数据库权限(SQL Server中通用数据库角色权限的处理详解)
- 程序员哪些情况可以考虑辞职