1 插槽

• 子组件写插槽位置

• 父组件写内容放入插槽

• 插槽内容无法访问子组件的数据

• 非作用域插槽

  • 默认插槽：<MyComponent> 123 </MyComponent>
  • 具名插槽：
    • 不简写：<MyComponent> <template v-slot:header> 123 </template> </MyComponent>
  • 简写： <MyComponent> <template #header> 123 </template> </MyComponent>
  • 具名与默认 插槽同时使用：
    • 自定义：#header，#xxx
  • 默认：#default，或者不写 <template></template>

• 作用域插槽：使父组件写的插槽的内容访问到子组件的数据

  • 默认作用域插槽
    • 不解构： <MyComponent v-slot="slotProps"> {{ slotProps.text }} </MyComponent>
    • 解构： <MyComponent v-slot="{ text, count }"> {{ text }} {{ count }} </MyComponent>
  • 具名作用域插槽： <MyComponent> <template #header="headerProps"> {{ headerProps }} </template> </MyComponent>
  • 具名与默认 作用域插槽同时使用：
  • 不能使用：<MyComponent v-slot="message"> <template #xxx> {{ message }} </template> </MyComponent>
  • 能使用：<template #xxx="{ message }"> {{ message }} </template>

1.1 默认插槽

<!-- 子组件 hello -->
<template><view><solt></solt></view>
</template>

<!-- 父组件 -->
<hello><view>111</view>
</hello>

1.2 插槽设置默认内容

<!-- 子组件 hello -->
<template><view><solt>我是默认内容</solt></view>
</template>

<!-- 父组件 -->
<hello><view>我能替代默认内容</view>
</hello>

1.3 具名插槽

• name 的插槽被称为具名插槽 (named slots)。
• 没有提供 name 的 <slot> 出口会隐式地命名为“default”。
• 要为具名插槽传入内容，需要使用一个含 v-slot 指令的 <template> 元素，并将目标插槽的名字传给该指令
• v-slot 指令 简写为 #

<!-- 子组件 hello -->
<template><view><slot name="header"></slot></view>
</template>

<!-- 父组件 -->
<hello><template v-slot:header><!-- header 插槽的内容放这里 --></template><!-- 简写 --><template #header><!-- header 插槽的内容放这里 --></template>
</hello>

1.4 具名与默认插槽同时使用

当一个组件同时接收默认插槽和具名插槽时，所有位于顶级的非 <template> 节点都被隐式地视为默认插槽的内容

<!-- 子组件 hello -->
<template><view><slot name="header"></slot>---<slot></slot></view>
</template>

<!-- 父组件 -->
<hello><template #header><!-- header 插槽的内容放这里 --></template><template #default><!-- 默认插槽的内容放这里 --></template>
</hello>

或

<!-- 父组件 -->
<hello><template #header><!-- header 插槽的内容放这里 --></template><!-- 默认插槽的内容放这里 -->
</hello>

1.5 动态插槽名

动态指令参数在 v-slot 上也是有效的，即可以定义下面这样的动态插槽名：

<base-layout><template v-slot:[dynamicSlotName]> ... </template><!-- 缩写为 --><template #[dynamicSlotName]> ... </template>
</base-layout>

1.6 作用域插槽

• 父组件写的插槽的内容无法访问到子组件的数据
• 如果同时使用父组件域内和子组件域内的数据

可以像对组件传递 props 那样，向一个插槽的出口上传递 attributes

1.6.1 默认作用域插槽

默认插槽通过子组件标签上的 v-slot 指令，直接接收到了一个插槽 props 对象：

<!-- 子组件 -->
<div><slot :text="greetingMessage" :count="1"></slot>
</div>

<!-- 父组件 -->
<MyComponent v-slot="slotProps">{{ slotProps.text }} {{ slotProps.count }}
</MyComponent>

<!-- 也可以在 v-slot 中使用解构： -->
<MyComponent v-slot="{ text, count }"> {{ text }} {{ count }} </MyComponent>

1.6.2 具名作用域插槽

• 不使用缩写 v-slot:header="slotProps"
• 使用缩写 #header="slotProps"
• name 是一个 Vue 特别保留的 attribute，不会作为 props 传递给插槽

<!-- 子组件 -->
<div><slot name="header" :text="greetingMessage" :count="1"></slot>
</div>

<!-- 父组件 -->
<MyComponent><template #header="headerProps"> {{ headerProps }} </template><template #default="defaultProps"> {{ defaultProps }} </template>
</MyComponent>

1.6.3 具名与默认 作用域插槽同时使用

如果你混用了具名插槽与默认插槽，则需要为默认插槽使用显式的 标签。尝试直接为组件添加 v-slot 指令将导致编译错误。这是为了避免因默认插槽的 props 的作用域而困惑。举例：

<!-- 该模板无法编译 -->
<MyComponent v-slot="{ message }"><p>{{ message }}</p><template #footer><!-- message 属于默认插槽，此处不可用 --><p>{{ message }}</p></template>
</MyComponent>

为默认插槽使用显式的 标签有助于更清晰地指出 message 属性在其它插槽中不可用：

<MyComponent><!-- 使用显式的默认插槽 --><template #default="{ message }"><p>{{ message }}</p></template><template #footer><p>Here's some contact info</p></template>
</MyComponent>