插槽slots

仅记录自己的学习过程

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第 3 天，点击查看活动详情 用于子组件接收模板片段。

<slot>元素是一个插槽出口，表示了父元素提供的插槽内容将在哪里被渲染。

最终的DOM是

<button class="fancy-btn">
 Click me!
</button>

渲染作用域

插槽内容无法访问子组件的数据，只能访问当前组件作用域

默认内容

在外部没有提供任何内容的情况下，可以为插槽指定默认内容，如果提供了插槽内容，那就会取代默认内容。

 <slot>
    Submit <!-- 默认内容 -->
  </slot>

具名插槽

<slot> 元素可以有一个特殊的属性 name，用来给各个插槽分配唯一的 ID，以确定每一处要渲染的内容。这类带 name 的插槽被称为具名插槽。没有提供 name 的 <slot> 出口会隐式地命名为“default”。 v-slot对应缩写#

动态插槽名

v-slot:[dynamicSlotName]

<template #[dynamicSlotName]>
    ...
  </template>

作用域插槽

能够接受参数的插槽被称为作用域插槽 (scoped slots)，因为它们接受的参数只在该插槽作用域内有效。

// 具名作用域插槽
<MyComponent>
  <template #header="headerProps">
    {{ headerProps }}
  </template>
</MyComponent>

<slot name="header" message="hello"></slot>