# vue 的插槽
1. 概念：
Vue 实现了一套内容分发的 API，slot 相当于是组件当中的一个占位符，可以用来在组件中显示一块 HTML 代码（HTML 模板）。也是组件通信的一种方式。
注意：插槽的显示位置由子组件说了算。将 slot 写在子组件哪，父组件传过来的模板将来就显示在哪
2. 插槽 VS 自定义属性
插槽： 将数据写在组件标签内
1 | <my-div> |
自定义属性： 写在组件标签的属性上
1 | <my-div pp="这里是传给子元素的数据"> |
3. 插槽的分类
-
单个插槽（默认插槽）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17父组件：
<custom-div>
<p class="red">
p标签最终会在子组件的slot中显示
</p>
</custom-div>
子组件：
<script>
...
customDiv:{
}
</script> -
具名插槽
命名插槽只能使用在 template 标签上1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36父组件：
<custom-div>
<!-- 在这里有很多个插槽，会分别使用进去 -->
<div>
这是第1个插槽：默认插槽
</div>
<!-- 注意：命名插槽只能使用在template标签上
https://cn.vuejs.org/v2/guide/components-slots.html#%E5%85%B7%E5%90%8D%E6%8F%92%E6%A7%BD
语法：
<template v-slot:名字>
包含的任意插槽内容
</template>
//在定义处写：
<slot name='名字'></slot>
-->
<template v-slot:one>
<div>
这是第2个插槽: 命名插槽
</div>
</template>
</custom-div>
子组件：
<script>
...
"custom-h3":{
}
</script>以上两种插槽相当于是实现了：父 -> 子的数据传递
-
作用域插槽
即在 slot 上绑定数据，传递给父级作用域使用。（类似于子到父）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39父级：
<custom-h3>
<!--
此处为父级作用域
用法：
v-slot:default="getWord"
含义：使用带值的 v-slot 来定义我们提供的插槽 prop 的名字
其中default可以省略
注意：默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确。
-->
<template v-slot:default="getWord" >
<div>
这是第3个插槽: 作用域插槽
<!-- 使用数据：
插槽prop名字.slot属性props
-->
<span style="color: red">{{getWord.word}}</span>
</div>
</template>
</custom-h3>
子级：
<script>
...
"custom-h3":{
data(){
return{
tofather:"给父级用"
}
},
}
</script>
