聊聊Vue如何使用自定义插槽Slot-51CTO.COM

Vue 中使用 slot 的方式取决于你是使用 Vue 2 还是 Vue 3，因为这两个版本在插槽（Slot）的语法上有所不同。

下面是两个版本的基本使用方法：

1. vue2 如何使用slot

在 Vue 2 中，slot 是用来实现组件内容分发的一个关键特性，它允许你在父组件中定义一块内容，然后在子组件中决定如何展示这块内容。

Vue 2 提供了几种类型的 slots，包括默认插槽、具名插槽以及作用域插槽。

以下是它们的基本使用方法：

1.1. 默认插槽（Default Slot）

默认插槽是最基本的用法，当你在一个组件中没有明确指定插槽名称时，内容将会被分配到默认插槽。

父组件使用：

<template>
  <child-component>
    <h1>我是父组件传递给子组件的内容</h1>
  </child-component>
</template>

子组件定义：

<template>
  <div class="child-component">
    <!-- 默认插槽内容将在这里被渲染 -->
    <slot></slot>
  </div>
</template>

1.2. 具名插槽（Named Slot）

具名插槽允许你有选择地插入内容到子组件的不同区域。

父组件使用：

<template>
  <child-component>
    <template v-slot:header>
      <h1>我是头部内容</h1>
    </template>
    <template v-slot:body>
      <p>我是主体内容</p>
    </template>
  </child-component>
</template>

子组件定义：

<template>
  <div class="child-component">
    <div class="header">
      <slot name="header"></slot>
    </div>
    <div class="body">
      <slot name="body"></slot>
    </div>
  </div>
</template>

1.3. 作用域插槽（Scoped Slot）

作用域插槽允许子组件向插槽传递数据。在 Vue 2 中，你可以使用 slot-scope 特性来接收这些数据。

父组件使用：

<template>
  <child-component>
    <template v-slot:default="{ item }">
      <span>{{ item.text }}</span>
    </template>
  </child-component>
</template>

子组件定义：

<template>
  <div class="child-component">
    <ul>
      <li v-for="item in items" :key="item.id">
        <slot :item="item"></slot>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' }
      ]
    };
  }
};
</script>

请注意，从 Vue 2.6 开始，你可以使用简写的 v-slot 替换 slot-scope，使得代码更简洁：

使用 v-slot 的简化写法：

<!-- 父组件 -->
<template>
  <child-component>
    <template v-slot:default="slotProps">
      <span>{{ slotProps.item.text }}</span>
    </template>
  </child-component>
</template>

以上就是 Vue 2 中使用 slot 的基本方法。

更多详细内容，请微信搜索“前端爱好者“， ⇲ 戳我查看。

2. vue3 如何使用slot

Vue 3 对插槽的使用进行了简化，并推荐使用新的 v-slot 语法，即使对于默认插槽也是如此。

Vue 3 中对插槽（Slots）的使用进行了改进，使其更加灵活和直观。

以下是在 Vue 3 中使用插槽的基本方法：

2.1. 默认插槽（Default Slot）

默认插槽的使用方式与Vue 2相似，但语法稍有不同。

Vue 3 中不再需要显式地使用 <slot> 标签，除非你需要配置特定的行为。

父组件使用：

<template>
  <ChildComponent>
    <h1>我是父组件传递给子组件的内容</h1>
  </ChildComponent>
</template>

子组件定义：

<template>
  <div class="child-component">
    <!-- 默认情况下，这里会自动渲染传递给组件的内容 -->
    <!-- 显式使用 <slot> 只是为了在需要时进行更复杂的设置 -->
  </div>
</template>

2.2. 具名插槽（Named Slot）

具名插槽的使用也保持了类似的逻辑，但现在使用 v-slot 指令更为简洁。

父组件使用：

<template>
  <ChildComponent>
    <template v-slot:header>
      <h1>我是头部内容</h1>
    </template>
    <template v-slot:body>
      <p>我是主体内容</p>
    </template>
  </ChildComponent>
</template>

子组件定义：

<template>
  <div class="child-component">
    <div class="header">
      <slot name="header"></slot>
    </div>
    <div class="body">
      <slot name="body"></slot>
    </div>
  </div>
</template>

2.3. 作用域插槽（Scoped Slot）

Vue 3 引入了新的 v-slot 语法，它不仅更简洁，还直接支持作用域插槽的传递。现在你可以直接在 v-slot 中解构来自子组件的数据。

父组件使用：

<template>
  <ChildComponent>
    <template v-slot:default="{ item }">
      <span>{{ item.text }}</span>
    </template>
  </ChildComponent>
</template>

子组件定义：

<template>
  <div class="child-component">
    <ul>
      <li v-for="item in items" :key="item.id">
        <slot :item="item"></slot>
      </li>
    </ul>
  </div>
</template>
<script setup>
import { ref } from 'vue';

const items = ref([
  { id: 1, text: 'Item 1' },
  { id: 2, text: 'Item 2' }
]);
</script>

2.4. 动态插槽名称

Vue 3 还支持动态插槽名称，通过将 v-slot 绑定到一个变量即可实现。

<template>
  <ChildComponent>
    <template v-for="(content, name) in slotsContent" :v-slot:[name]>
      {{ content }}
    </template>
  </ChildComponent>
</template>

Vue 3 中插槽的改进旨在简化API并提高可读性，同时保持了Vue组件间内容复用的强大能力。

Vue 3 中 v-slot 语法是标准用法，即使对于默认插槽也是如此，尽管默认插槽在子组件中可能不需要显式的 <slot> 标签。

此外，Vue 3 引入了Composition API，这会影响子组件内部状态管理的方式，但对插槽的使用影响不大。