vue slot插槽

单个插槽（默认插槽）、具名插槽、匿名插槽

 

(1)单个插槽：

(2)具名插槽可以在一个组件中出现N次。出现在不同的位置

在父组件中：

...

或者

...

或者

在子组件中：

<slot name="name1">slot>

（3）作用域插槽 | 带数据的插槽

因为单个插槽和具名插槽不绑定数据，所以父组件提供的模板要既包括样式由包括内容的

但有时我们需要获取到子组件提供的一些数据，那么作用域插槽就排上用场了。

“俗”一点的解释：

父组件：

//这里的datas接收的就是子组件中name为chacao的传递的数据

{{data.name}},{{data.age}} 

或者：

也可以不书写 default 关键字，默认就是假定对应默认插槽

子组件：

在子组件中创建 slot 并通过 v-bind 绑定数据 prop 的形式传入数据

使用 v-slot 绑定一个命名空间 user，这样就可以通过 user 对象引用到子组件中传入的数据了

与具名插槽配合时，需要明确书写对应的命名空间：

	


# 代表 v-slot 的缩写，缩写在有参数的情况下才会生效