vue slot插槽

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

 

(1)单个插槽：<slot></slot>

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

在父组件中：

<div slot="name1">...</div> 或者 <template slot="name1"></template>

<div slot="name2">...</div> 或者 <template slot="name2"></template>

在子组件中：

<slot name="name1"></slot>

<slot name="name2"></slot>

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

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

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

“俗”一点的解释：

父组件：

<child-tem>

<div slot-scoped="datas"> //这里的datas接收的就是子组件中name为chacao的传递的数据

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

</div>

或者：

<template v-slot:default="user">{{user.data.username}}</template>

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

<template v-slot="user">{{user.data.username}}</template>

</child-tem>

子组件：

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

<div>

<slot name="chacao" name="lily" age="3" :data="data"></slot>

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

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

	
<template #:one="user">{{user.data.username}}</template>
<template #:another="user">{{user.data.username}}</template>
# 代表 v-slot 的缩写，缩写在有参数的情况下才会生效

</div>

<script>
export default {
data(){
  return {
    data:[1,2,3]
   }
 }
}
</script>