vue 3.x 新指令 v-slot

vue 3.x 增加了v-slot的指令来代替原来2.6的slot，slot-scope属性

原因：这里引用了官方的说法，我们计划统一插槽类型，因此不再需要（从概念上）区分作用域插槽和非作用域插槽。一个插槽可能会或可能不会接收道具，但它们全都是插槽。有了这个概念上的统一，具有slot和slot-scope在两个特殊属性似乎没有必要，这将是很好的统一语法的单个构建下也是如此（统一插槽属性，便于学习）

之前也写过有关slot属性的使用，现在以新旧比较的方式来使用新指令v-slot

slot属性：https://www.cnblogs.com/chujunqiao/p/11807021.html

1 普通插槽

这里有一个my-template的组件

组件里有一个slot模版

my-template组件内的内容会替换到默认的slot标签中（没有name属性的slot）

结果：

显示写法：

2 具名插槽

可以通过给v-slot指令增加一个参数名称来指定具体的某一个插槽（具有name属性的slot）

模版内容会替换具有name属性，而且name=‘vslot’的插槽

结果：

具名插槽缩写：#vslot

3 作用域插槽 

父级组件决定插槽内容的渲染方式

把默认slot重命名为mySlot 循环在slot上绑定的data数据

结果：

作用域插槽的解构使用：

写法变换：

这里把data数据直接解构出来使用，不用再通过slot对象来引用

转载于：https://www.cnblogs.com/chujunqiao/p/12272968.html