Vue3 slots 插槽的用法

在 Vue 3 中，插槽（Slots）是一种强大的机制，允许父组件向子组件传递内容。插槽的使用不仅提高了组件的复用性，还增强了组件的灵活性。以下是对 Vue 3 中插槽用法的详细解析：

一、默认插槽（Default Slots）

默认插槽是最基本的插槽类型，用于在组件中插入内容。在子组件中，使用 <slot> 标签定义插槽位置。父组件在使用子组件时，将需要插入的内容放在子组件标签内部即可。

示例：

<!-- 子组件 ChildComponent.vue -->
<template>
  <div class="child-component">
    <slot></slot> <!-- 默认插槽 -->
  </div>
</template>

<!-- 父组件 ParentComponent.vue -->
<template>
  <div class="parent-component">
    <ChildComponent>
      <p>这是插入到默认插槽的内容</p>
    </ChildComponent>
  </div>
</template>

在上面的示例中，父组件的内容 <p>这是插入到默认插槽的内容</p> 会被渲染到子组件的 <slot> 位置。

二、命名插槽（Named Slots）

有时候，一个插槽不能满足业务需求，可以使用命名插槽定义多个插槽位置。在子组件中，使用 name 属性为 <slot> 标签命名。父组件在使用子组件时，需要使用 <template v-slot:slotName> 的形式向指定插槽位置投放内容。

示例：

<!-- 子组件 ChildComponent.vue -->
<template>
  <div class="child-component">
    <slot name="header"></slot>
    <slot></slot> <!-- 默认插槽 -->
    <slot name="footer"></slot>
  </div>
</template>

<!-- 父组件 ParentComponent.vue -->
<template>
  <div class="parent-component">
    <ChildComponent>
      <template v-slot:header>
        <h3>这是头部插槽的内容</h3>
      </template>
      <p>这是插入到默认插槽的内容</p>
      <template v-slot:footer>
        <p>这是底部插槽的内容</p>
      </template>
    </ChildComponent>
  </div>
</template>

在上面的示例中，子组件定义了三个插槽：header、默认插槽和 footer。父组件分别向这三个插槽插入了对应的内容。

三、作用域插槽（Scoped Slots）

作用域插槽允许父组件访问子组件内部的数据。在子组件中，使用特殊的 v-slot 指令声明作用域插槽，并将需要传递给父组件的数据作为 v-slot 的参数。父组件在使用子组件时，通过 v-slot 指令接收这些数据，并在插槽内容中使用。

示例：

<!-- 子组件 ChildComponent.vue -->
<template>
  <div class="child-component">
    <slot name="header" :message="message"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from ChildComponent!'
    };
  }
};
</script>

<!-- 父组件 ParentComponent.vue -->
<template>
  <div class="parent-component">
    <ChildComponent>
      <template v-slot:header="{ message }">
        <h3>{{ message }}</h3>
      </template>
    </ChildComponent>
  </div>
</template>

在上面的示例中，子组件将 message 数据通过作用域插槽传递给父组件。父组件在插槽内容中使用 {{ message }} 来显示这些数据。

四、动态插槽名称

Vue 3 支持动态插槽名称。在父组件的 v-slot 指令中，可以使用表达式作为插槽的名称。

示例：

<!-- 子组件 ChildComponent.vue -->
<template>
  <div class="child-component">
    <slot :name="slotName"></slot>
  </div>
</template>

<script>
export default {
  props: {
    slotName: {
      type: String,
      required: true
    }
  }
};
</script>

<!-- 父组件 ParentComponent.vue -->
<template>
  <div class="parent-component">
    <ChildComponent :slotName="'dynamicSlot'">
      <template v-slot:[dynamicSlotName]>
        <p>这是动态插槽的内容</p>
      </template>
    </ChildComponent>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicSlotName: 'dynamicSlot'
    };
  }
};
</script>

注意：在上面的动态插槽名称示例中，由于 Vue 的模板编译限制，直接在 ChildComponent 标签内部使用动态插槽名称可能不起作用。因此，该示例更多是为了说明动态插槽名称的概念，实际使用时可能需要采用其他方式来实现类似的功能。

五、插槽的简写形式

Vue 3 允许使用简写形式来定义和使用插槽。对于默认插槽，可以省略 <template> 标签和 v-slot 指令中的 default 关键字；对于命名插槽，可以使用 # 作为 v-slot 的简写。

示例：

<!-- 子组件 ChildComponent.vue -->
<template>
  <div class="child-component">
    <slot name="header"></slot>
    <slot></slot> <!-- 默认插槽 -->
  </div>
</template>

<!-- 父组件 ParentComponent.vue -->
<template>
  <div class="parent-component">
    <ChildComponent>
      <template #header>
        <h3>这是头部插槽的内容（简写形式）</h3>
      </template>
      <p>这是插入到默认插槽的内容（无需 <template> 和 v-slot）</p>
    </ChildComponent>
  </div>
</template>

综上所述，Vue 3 中的插槽提供了丰富的功能，包括默认插槽、命名插槽、作用域插槽和动态插槽名称等。这些功能使得父组件能够灵活地向子组件传递内容，并访问子组件内部的数据。