(十八)补充-Vue3中插槽的使用

如题所述

第1个回答  2022-07-15
vue3中的插槽是在用的时候和vue2的区别略有不同,常见插槽使用中主要体现在具名插槽上。
1、vue3中新增了v-slot来代替vue2中的slot等属性。
2、在普通插槽中使用:

结果会将el-table的内容渲染到组件模板中的el-main中。它还有另一种写法:

此种写法就是vue3中新增的插槽指令,它还有另一种写法:

此种写法类似于v-on简写于@,v-bind简写于:,v-slot也有简写:#。
3、在具名插槽中使用,
可以通过给v-slot指令增减一个参数名称来指定具体的某一个插槽(具有name属性的插槽)

在此组件中就包含了已给匿名插槽以及,name分别为"top-left","top-right","bottom"的三个具名插槽。

那么我们在使用的时候直接使用插槽的简写来对指定的插槽指定要渲染的内容。

下一章: (十九)setup 语法糖应用
上一章: (十七)Vue3.x使用provide/inject来代替vuex的实现方式

ps: 未经他人事,勿劝他人善!
相似回答