vue中slot(插槽)详解,slot、slot-scope和v-slot
slot是什么
slot,也称插槽,可以类比为插卡式的FC游戏机,游戏机(子组件)暴露卡槽(插槽)让用户插入不同的游戏磁条(自定义内容),游戏机会读取并加载磁条里的游戏
Vue的slot,是组件的一块HTML模板,这块模板由使用组件者即父组件提供。可以说是子组件暴露的一个让父组件传入自定义内容的接口。
slot的作用
让用户可以拓展组件,去更好地复用组件和对其做定制处理
举一些例子,比如布局组件、表格列、下拉选项
slot怎么用
slot的用法可以分为三类,分别是默认插槽、具名插槽、作用域插槽
子组件中:
- 插槽用
<slot>
标签来确定渲染的位置,里面放如果父组件没传内容时的后备内容 - 具名插槽用
name
属性来表示插槽的名字,不传为默认插槽 - 作用域插槽在作用域上绑定属性来将子组件的信息传给父组件使用,这些属性会被挂在父组件slot-scope接收的对象上
//Child.vue
<template><div><main>//默认插槽<slot>//slot内为后备内容<h3>没传内容</h3></slot></main>//具名插槽<header><slot name="header"><h3>没传header插槽</h3></slot></header>//作用域插槽<footer><slot name="footer" testProps="子组件的值"><h3>没传footer插槽</h3> </slot> </footer></div>
</template><style scoped>
div{border:1px solid #000;
}
</style>
父组件在使用时:
- **默认插槽 **的话直接在子组件的标签内写入内容即可
- 具名插槽是在默认插槽的基础上加上
slot
属性,值为子组件插槽name
属性值 - 作用域插槽则是通过
slot-scope
获取子组件的信息,在内容中使用。这里可以用解构语法去直接获取想要的属性
// Parent.vue
<child><!-- 默认插槽 --><div>默认插槽</div> <!-- 具名插槽 --><div slot="header">具名插槽header</div><!-- 作用域插槽 --><div slot="footer" slot-scope="slotProps">{{slotProps.testProps}}</div>
</child>
渲染结果为
v-slot
在vue2.6中。上述的API被软废弃(3.0正式废弃),取而代之的是内置指令v-slot,可以缩写为【#】
子组件用法保持不变,父组件中
slot
属性弃用,具名插槽通过指令参数v-slot:插槽名
的形式传入,可以简化为#插槽名
slot-scope
属性弃用,作用域插槽通过v-slot:xxx="slotProps"
的slotProps来获取子组件传出的属性v-slot
属性只能在template
上使用,但在**【只有默认插槽时】**可以在组件标签上使用
//Parent
<template><child><!--默认插槽--><template v-slot><div>默认插槽</div></template><!--具名插槽--><template #header><div>具名插槽</div></template><!--作用域插槽--><template #footer="slotProps"><div>{{slotProps.testProps}}</div></template><child>
</template>
拓展用法:
- 同样可以通过解构获取
v-slot={user}
,还可以重命名v-slot="{user:newName}"
和定义默认值v-slot="{user = '默认值'}"
- 插槽名可以是动态变化的
v-slot:[slotName]
注意
- 默认插槽名为
default
,可以省略default直接写v-slot
,缩写为#时不能不写参数,写成#default
(这点所有指令都一样,v-bind、v-on) - 多个插槽混用时,v-slot不能省略default
作用域插槽的原理
slot本质上是返回VNode的函数,一般情况下,Vue中的组件要渲染到页面上需要经过template>>render function >> NVode >> DOM
过程。组件挂载的本质就是执行渲染函数得到VNode,至于data/props/computed这些属性都是给VNode提供数据来源
在2.5之前,如果是普通插槽就直接是VNode的形式了,而如果是作用域插槽,由于子组件需要再父组件访问子组件的数据,所以父组件下是一个未执行的函数(slotScopre) => return h('div',slotScope.msg)
,接受子组件的slotProps参数,在子组件渲染实例时会调用该函数传入数据。
在2.6之后,两者合并,普通插槽也变成一个函数,只是不接受参数了
大纲速记
vue中slot(插槽)详解,slot、slot-scope和v-slot相关推荐
- vue中mint-ui使用详解
这次给大家带来vue中mint-ui使用详解,vue中mint-ui使用的注意事项有哪些,下面就是实战案例,一起来看一下. mint-ui在vue中的使用,供大家参考,具体内容如下 首先放上mint- ...
- Vue中的v-slot详解,作用域插槽和具名插槽
1.具名插槽 有时候我们希望在指定的位置输出我们的子元素,这时候具名插槽就排上了用场. //组件调用时 <MyFooter v-red :age.sync="age"> ...
- jq的插件 vue中引用_详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
本篇文章主要介绍了详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件,具有一定的参考价值,有兴趣的可以了解一下 使用vue-cli构建的vue项目,webpack的配置文 ...
- 在vue中引入css,详解在Vue中有条件地使用CSS类
详解在Vue中有条件地使用CSS类 2019-01-07 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了详解在Vue中有条件地使用CSS类,编程之家小编觉得挺不 ...
- Vue中$refs 使用详解
js中想要获取dom节点一般用document.querySelecto('.input'),然后获取input的值. 在vue中绑定ref就不需要在获取dom节点了,直接绑定在input上,然后 $ ...
- php watcher,vue 中的 watcher详解
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的 watcher .这是为什么 Vue 提供一个更通用的方法通过watch 选项,来响应数据的变化.当你想要在数据变化响应时,执行异步操作或开 ...
- vue中watch的详解
Watch概述 一个对象,键是需要观察的表达式,值是对应回调函数.值也可以是方法名,或者包含选项的对象.Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性. ...
- 关于Vue中props的详解
看一下官方文档: 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.父组件的数据需要通过 prop 才能下发到子组件中. 也就是props是子组件访问父组件数 ...
- Vue学习:Vue中的路由详解(完整版)
一.vue-router的理解 首先,需要理解一下vue-router: vue-router是vue的一个插件,专门用来实现SPA应用.SPA也就是单页Web应用,特点是:整个应 用只有一个完整的页 ...
- Vue中过滤器用法详解
一.什么是过滤器 Vue.js官方文档说明:可被用于一些常见的文本格式化. 个人理解就是把一些不需要的东西过滤掉,只是对数据进行加工处理然后返回处理后的数据,和计算属性很相似. 二.如何使用过滤器 过 ...
最新文章
- oracle rac对心跳要求_关于心跳网络引起的Oracle RAC的节点驱逐(不是实例驱逐)...
- 深入理解Kafka Connect:转换器和序列化
- python实现gauss-seidel迭代公式_python实现高斯(Gauss)迭代法的例子
- vs编译器 printf 控制台输出_【语言教程】通过语言了解GCC编译器工作过程
- Java笔记-解决读取文件时中文乱码问题(InputStreamReader设置编码)
- 获取前一天的时间安排表_【央美考研】2021年硕士研究生招生入学考试时间安排...
- e - 数据结构实验之查找五:平方之哈希表_面试中常被问到的Hash表,你了解吗
- oracle怎么变为整数,如何在Oracle 11g SQL中为char添加整数?(How to add integers to char in Oracle 11g SQL?)...
- tomcat组播实现session一致性_java会话技术-Session
- Nuance语音识别技术及解决方案
- java程序设计基础_陈国君版第五版_第六章习题
- 函数型计算机有储存功能吗,无存储功能的计算器指的是什么
- 怎么禁用计算机上的自动播放,手把手教你如何关闭自动播放
- 趣商宝微信招生方案 ,线上招生难,十大绝招帮您搞定微信吸粉!
- Day2多种抓包工具介绍以及使用封包监听工具找到挑战数据包实现发送数据包进行挑战
- 关于笔记本检测不到外接显示器的问题
- 拉格朗日插值公式---读题题
- 『开发技术』Python中文分词工具SnowNLP教程
- Android 之路18---Java基础12
- JavaScript的valueOf()方法