默认/具名插槽：父传给子
一般用于父组件传递不同的数据给子组件，子组件根据这些数据提供固定的插槽位置。当父组件使用这些插槽时，会替换其设置的默认插槽内容。
具名插槽：子组件设置name属性，父组件绑定v-slot:相应name指令，注意是:（为了区别于具名插槽）。默认插槽则不用。
父组件：
1
2
3
4
5
6
7
8
9
10
11
| <template>
<Child>
<template v-slot:header>
<h1>这是header</h1>
</template>
<template #footer>
<!-- 简写 -->
<h1>这是footer</h1>
</template>
</Child>
</template>
|
子组件：
1
2
3
4
5
6
| <template>
<div>
<slot name="header"></slot>
<slot name="footer"></slot>
</div>
</template>
|
作用域插槽：子传给父
一般用于同时使用父组件域内和子组件域内的数据，或子组件有固定数据，但在父组件中有不同的展现形式。
父组件：
1
2
3
4
5
6
7
| <template>
<Child>
temolate v-slot="slotProps">
<h1>{{slotProps.data1}}</h1>
<h1>{{slotProps.data2}}</h1>
</Child>
</template>
|
子组件传递相应的属性（可以用v-bind）
1
2
3
4
5
| <template>
<div>
<slot :data1="data1" data2="1"></slot>
</div>
</template>
|
具名插槽和作用域插槽可以同时使用，如<template v-slot:name="slotProps"></slot>，即在v-slot后加上name属性，或简写#name。
如找不到对应的插槽，则插入失败。