相关知识点
- 匿名插槽
- 具名插槽
- 作用域插槽
- 动态插槽名
匿名插槽
子组件：
<div>
<slot>如果父组件中传递数据，会替换此处内容</slot>
</div>
父组件：
<!-- 此处会显示子组件中的内容 -->
<Comp1></Comp1>
<!-- 此处显示父组件传递的内容 -->
<Comp1>我是组件1的匿名插槽</Comp1>
具名插槽
跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header。
子组件：
<div>
<!-- 默认插槽 -->
<slot></slot>
<!-- 具名插槽 -->
<slot name="content"></slot>
</div>
父组件：
<Comp2>
<!-- 默认插槽用default做参数 -->
<template v-slot:default>具名插槽</template>
<!-- 具名插槽用插槽名做参数 -->
<template v-slot:content>内容...</template>
</Comp2>
作用域插槽
父组件中要显示的数据由子组件决定。
子组件：
<div>
<slot :foo="foo"></slot>
<slot name="content" bar="bar~~~"></slot>
</div>
父组件：
<Comp3>
<!-- 把v-slot的值指定为作用域上下文对象 -->
<!-- 只能有一个v-slot:default -->
<template v-slot:default="ctx">来自子组件数据：{{ ctx.foo }}</template>
<!-- 或者 -->
<template v-slot:default="{ foo }">来自子组件数据：{{ foo }}</template>
<template v-slot:content="{ bar }">来自子组件数据：{{ bar }} </template>
</Comp3>
动态插槽名
动态指令参数也可以用在 v-slot 上，来定义动态的插槽名。
子组件：
<div>
<slot name="comp4SlotName" tua="tua"></slot>
</div>
父组件：
<Comp4>
<template v-slot:[dynamicSlotName]="{ tua }">来自子组件数据：{{ tua }}</template>
</Comp4>
data() {
return {
dynamicSlotName: "comp4SlotName"
};
}
