在2.6.0中,我们为具名插槽和作用域插槽引入了一个新的统一的语法(即v-slot指令)。它取代了槽和slot-scope这两个目前已被废弃但未被移除且仍在文档中的特性。新语法的由来可查阅RFC。
引vue官方文档
之前做项目时,对插槽理解太少了,这两天学习时,才发现插槽更新用v-slot了,自己做了些简单总结,与大家分享一下~
我的理解就是父页面在组件标签内插入任意内容,子组件内插糟槽控制摆放位置(匿名插槽,具名插槽)
<>强插槽分类
插槽一共就三大类
1 .匿名插槽(也叫默认插槽):没有命的名,有且只有一个
2.具名插槽:相对匿名插槽组件槽标签带名字命名的
3.作用域插槽:子组件内数据可以被父页面拿到(解决了数据只能从父页面传递给子组件)
用法:我的理解,匿名插糟只需要一个。(就是这些,不太复杂)
父页面:
& lt; todo-list>
& lt;模板v-slot: default>
任意内容
& lt; p>我是匿名插槽& lt;/p>
& lt;/template>
& lt;/todo-list>//v-slot:默认写上感觉和具名写法比较统一,容易理解,也可以不用写
之前
子组件todoList.vue
& lt; slot>我是默认值& lt;/slot>
# # # #显示//任意内容//我是匿名插槽
之前
用法:我的理解,和匿名插槽比较,就是必须起名todo对应,可以有多个具名插槽。(没了~)
父页面
& lt; todo-list>
& lt;模板v-slot: todo>
任意内容
& lt; p>我是匿名插槽& lt;/p>
& lt;/template>
& lt;/todo-list>//todo
数据(){
返回{
dynamicSlotName:“待办事项”
}
},
子组件
& lt;槽的名字=按焓孪睢痹谖沂悄现? lt;/slot>
# # # #显示//任意内容//我是匿名插槽
之前
对v-slot:待办事项做操作:
<强>动态命名
v-slot: {dynamicSlotName}//替换标签上v-slot: todo
<强>具名插槽缩写(匿名插槽用法)(可以后看)
# todo替换标签上v-slot: todo
匿名如果想用必须加上默认
#默认替换标签上v-slot: todo
父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。
1。重点是slotProps接取子组件里:用户=坝没А?测试=安馐浴崩嗨剖粜缘氖?br/>
父页面
& lt; todo-list>
& lt;模板v-slot: todo=皊lotProps”比;
{{slotProps.user.firstName}}
& lt;/template>
& lt;/todo-list>//slotProps可以随意命名//slotProps接取的是子组件标签槽上属性数据的集合所有v-bind:用户=坝没А?
之前
子组件
& lt;槽的名字=按焓孪睢?用户=坝没А?测试=安馐浴北?
{{用户。lastName}}
& lt;/slot>
数据(){
返回{
用户:{
姓:“张”,
名字:“悦”
},
测试:(1、2、3、4)
}
},//{{用户。lastName}}是默认数据v-slot: todo当父页面没有(=皊lotProps”)//时显示
# # # #显示//曰
之前
<强>
父页面(子组件不变显示一样)
//相当于
函数(slotProps) {//插槽内容
}
(slotProps)=祝辞参数可以用槽标签上现有的值({用户,测试})替换以前
& lt; todo-list>
& lt;模板v-slot: todo="{用户,测试}
“比;
{{user.firstName}}
& lt;/template>
& lt;/todo-list>
# # # #显示
# #//曰
参数值替换名字(可以后看)
& lt; todo-list>
& lt;模板v-slot: todo="{用户:人,测试}
“比;
{{person.firstName}}
& lt;/template>
& lt;/todo-list>//v-slot: [dynamicSlotName]="{用户:人,测试}
# # # #显示
# #//曰
