Vue 3 第十九章：组件七（插槽）

1. 插槽

插槽是一种在Vue组件中定义可复用内容的机制。它可以让你将组件的内容分发到它的子组件中，从而使得组件更具有灵活性和可重用性。Vue3中的插槽被称为“模板插槽”，使用时需要用到新的语法。具体用法如下：

1.1. 匿名插槽

在子组件中，我们可以使用 <slot> 标签定义一个插槽：

<!-- Parent.vue -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

在父组件中，我们可以使用 <template> 标签插入父组件中定义的插槽：

<!-- Child.vue -->
<template>
  <Parent>
    <!-- 这里是插槽内容 -->
    <div>我是插槽内容</div>
  </Parent>
</template>

这样，在运行时，插槽内容会替换 <slot> 标签内的内容。

1.2. 具名插槽

如果我们在一个组件中定义了多个插槽，可以使用具名插槽来区分它们：

<!-- Parent.vue -->
<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

在子组件中，我们可以使用 v-slot 指令来插入具名插槽：

<!-- Child.vue -->
<template>
  <Parent>
    <!-- 这里是具名插槽内容 -->
    <template v-slot:header>
      <h1>这里是头部</h1>
    </template>

    <!-- 这里是默认插槽内容 -->
    <div>这里是中间部分</div>

    <!-- 这里是具名插槽内容 -->
    <template v-slot:footer>
      <h1>这里是底部</h1>
    </template>
  </Parent>
</template>

v-slot有对应的简写#，因此<template v-slot:header>可以简写为 <template #header>。其意思就是“将这部分模板片段传入父组件的header插槽中”。

1.3. 作用域插槽

作用域插槽允许父组件将数据传递给插槽，让子组件可以使用这些数据。在父组件中，我们可以使用v-bind:名称="数据"来传递数据，在子组件中 v-slot 指令来接收数据：

<!-- Parent.vue -->
<template>
  <div>
    <slot v-bind:item="item" v-for="item in items"></slot>
  </div>
</template>

在子组件中，我们可以使用 v-slot 指令来插入作用域插槽：

<!-- Child.vue -->
<template>
  <Parent>
    <!-- 这里是作用域插槽内容 -->
    <template v-slot="{ item }">
      <div>{
   
   { item }}</div>
    </template>
  </Parent>
</template>

这样，在运行时，父组件中定义的 items 数组中的每个元素都会被传递给子组件的作用域插槽。