[Vue] 多个 slot 插槽场景，该如何申明与使用【热度: 380】

[yanlele]

关键词：多 slot 场景

Vue 支持多个插槽（slot），使得组件的内容分发更加灵活。在 Vue 3 中，你可以通过具名插槽来实现这一点，这允许你定义多个插槽，并在父组件中指定对应的内容填充到子组件的不同部位。

定义具名插槽

在子组件中，你可以使用 <slot> 元素来定义一个或多个插槽，并通过 name 属性为每个插槽命名。未命名的插槽被视为默认插槽，它会接收所有未匹配到具名插槽的内容。

<!-- 子组件 -->
<template>
  <div>
    <header>
      <!-- 定义一个名为 "header" 的插槽 -->
      <slot name="header"></slot>
    </header>
    <main>
      <!-- 默认插槽 -->
      <slot></slot>
    </main>
    <footer>
      <!-- 定义一个名为 "footer" 的插槽 -->
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

使用具名插槽

在父组件中，你可以通过 <template> 元素结合 v-slot 指令（或缩写 #）来指定填充到具名插槽的内容。对于默认插槽，直接放在子组件标签内部的内容即可。

<!-- 父组件 -->
<template>
  <div id="app">
    <MyComponent>
      <!-- 使用 v-slot 指定插槽内容 -->
      <template v-slot:header>
        <h1>这里是头部内容</h1>
      </template>

      <!-- 默认插槽内容 -->
      <p>这里是主体内容</p>

      <!-- 使用缩写 # 指定插槽内容 -->
      <template #footer>
        <footer>这里是尾部内容</footer>
      </template>
    </MyComponent>
  </div>
</template>

作用域插槽

除了普通的具名插槽之外，Vue 还支持作用域插槽（scoped slots）。这是一种特殊类型的插槽，它允许子组件传递数据回到插槽内容中，这样，父组件就可以访问子组件的数据了。

<!-- 子组件 -->
<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <!-- 使用作用域插槽传递数据 -->
      <slot name="item" :item-data="item">{{ item.text }}</slot>
    </li>
  </ul>
</template>

<script>
  export default {
    data() {
      return {
        items: [
          { id: 1, text: "Item 1" },
          { id: 2, text: "Item 2" },
        ],
      };
    },
  };
</script>

父组件可以这样使用作用域插槽：

<!-- 父组件 -->
<MyComponent>
  <template #item="{ itemData }">
    <span>{{ itemData.text }}</span>
  </template>
</MyComponent>

在这里，itemData 是子组件传递给插槽的数据对象，父组件通过解构它来访问插槽数据。