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

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

引vue官方文档

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

插槽

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

插槽分类

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

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

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

父页面:

 <todo-list>     <template v-slot:default>       任意内容       <p>我是匿名插槽 </p>    </template></todo-list>  //v-slot:default写上感觉和具名写法比较统一,容易理解,也可以不用写

子组件 todoList.vue

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

具名插槽(name)

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

父页面

 <todo-list>     <template v-slot:todo>       任意内容       <p>我是匿名插槽 </p>    </template></todo-list> // tododata() {   return {    dynamicSlotName:"todo"    } },

子组件

<slot name="todo">我是默认值</slot>##显示##// 任意内容// 我是匿名插槽

对 v-slot:todo 做操作:

动态命名

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

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

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

匿名如果想用必须加上default

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

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

作用域插槽

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

父页面

<todo-list> <template v-slot:todo="slotProps" >   {{slotProps.user.firstName}} </template> </todo-list> //slotProps 可以随意命名//slotProps 接取的是子组件标签slot上属性数据的集合所有v-bind:user="user"