详解vue2.6插槽更新v-slot用法总结

2023-08-27 00:38:05 355

在2.6.0中，我们为具名插槽和作用域插槽引入了一个新的统一的语法(即v-slot指令)。它取代了slot和slot-scope这两个目前已被废弃但未被移除且仍在文档中的特性。新语法的由来可查阅RFC。

引vue官方文档

之前做项目时,对插槽理解太少了,这两天学习时,才发现插槽更新用v-slot了,自己做了些简单总结,与大家分享一下~

插槽

我的理解就是父页面在组件标签内插入任意内容,子组件内插糟slot控制摆放位置(匿名插槽,具名插槽)

插槽分类

插槽一共就三大类
1.匿名插槽(也叫默认插槽):没有命名,有且只有一个
2.具名插槽:相对匿名插槽组件slot标签带name命名的
3.作用域插槽:子组件内数据可以被父页面拿到(解决了数据只能从父页面传递给子组件)

匿名插槽(也叫默认插槽default)

用法:我的理解,匿名插糟只需要一个.(就是这些,不太复杂)

父页面:



任意内容
我是匿名插槽


//v-slot:default写上感觉和具名写法比较统一,容易理解,也可以不用写

子组件todoList.vue

我是默认值
##显示##
//任意内容
//我是匿名插槽

具名插槽(name)

用法:我的理解,和匿名插槽比较,就是必须起名todo对应,可以有多个具名插槽.(没了~)

父页面



任意内容
我是匿名插槽


//todo
data(){
return{
dynamicSlotName:"todo"
}

},

子组件

我是默认值
##显示##
//任意内容
//我是匿名插槽

对v-slot:todo做操作:

动态命名

v-slot:{dynamicSlotName}//替换标签上v-slot:todo

具名插槽缩写(匿名插槽用法)(可以后看)

#todo替换标签上v-slot:todo

匿名如果想用必须加上default

#default替换标签上v-slot:todo

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

作用域插槽

1.重点是slotProps接取子组件里:user="user":test="test"类似属性的数据

父页面



{{slotProps.user.firstName}}


//slotProps可以随意命名
//slotProps接取的是子组件标签slot上属性数据的集合所有v-bind:user="user"

子组件


{{user.lastName}}

data(){
return{
user:{
lastName:"Zhang",
firstName:"yue"
},
test:[1,2,3,4]
}
},
//{{user.lastName}}是默认数据v-slot:todo当父页面没有(="slotProps")
//时显示Zhang


##显示##
//yue

解构插槽Prop

父页面(子组件不变显示一样)

//相当于
function(slotProps){
//插槽内容
}
(slotProps)=>参数可以用slot标签上现有的值({user,test})替换



{{user.firstName}}


##显示##
##//yue

参数值替换名字(可以后看)



{{person.firstName}}



//v-slot:[dynamicSlotName]="{user:person,test}
##显示##
##//yue

独占默认插槽缩写(可以后看)
感觉没什么机会用,限制条件太多

总结

在用上v-slot之后只需要考虑好

1.是否需要命名(匿名插槽,具名插槽)
2.父页面是否需要取存在子页面的数据(作用域插槽)

todo-list实例

可以试一下,便于理解~

父页面

子组件




.slotTodoChildren.lis{
display:block;
background:#434534;
line-height:40px;
margin-top:10px;
color:#fff;
font-size:24px;
height:40px;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

详解vue2.6插槽更新v-slot用法总结

热门推荐

随机推荐