如何在 Vue 中使用插槽（slots）？插槽的类型有哪些？

如何在 Vue 中使用插槽（slots）？插槽的类型有哪些？

在 Vue.js 中，插槽（slots）是一种用于组件内容分发的机制，它允许你将内容从父组件传递到子组件的模板中。插槽使得组件更加灵活和可复用。本文将介绍如何在 Vue 中使用插槽以及插槽的类型。

插槽的基本用法

1. 定义插槽

在子组件中，使用 <slot> 标签来定义一个插槽。可以给插槽添加一个名称，或者省略名称来定义一个默认插槽。

示例代码：

子组件（MyComponent.vue）：

<template>
  <div>
    <h1>这里是标题</h1>
    <slot>这里是默认插槽的内容</slot>
    <slot name="footer">这里是 footer 插槽的内容</slot>
  </div>
</template>

<script setup>
// ...
</script>

2. 使用插槽

在父组件中，通过在子组件标签内部的内容来使用插槽。

示例代码：

父组件：

<template>
  <MyComponent>
    <p>这是默认插槽的内容</p>
    <template v-slot:footer>
      这是 footer 插槽的内容
    </template>
  </MyComponent>
</template>

<script setup>
import MyComponent from './MyComponent.vue';
</script>

在这个例子中，我们使用了默认插槽和命名插槽 footer。

插槽的类型

Vue 提供了几种类型的插槽：

1. 默认插槽：没有指定 name 属性的 <slot> 标签定义了一个默认插槽。

2. 具名插槽：通过 name 属性定义的插槽，可以在子组件中定义多个具名插槽。

3. 作用域插槽：允许子组件将数据作为插槽的一部分传递给父组件。

示例代码

具名插槽：

子组件（MyComponent.vue）：

<template>
  <div>
    <slot name="header">默认 header 内容</slot>
    <slot>默认内容</slot>
    <slot name="footer">默认 footer 内容</slot>
  </div>
</template>

<script setup>
// ...
</script>

父组件：

<template>
  <MyComponent>
    <template v-slot:header>
      <h1>这是 header 插槽的内容</h1>
    </template>
    <p>这是默认插槽的内容</p>
    <template v-slot:footer>
      这是 footer 插槽的内容
    </template>
  </MyComponent>
</template>

<script setup>
import MyComponent from './MyComponent.vue';
</script>

作用域插槽：

子组件（MyComponent.vue）：

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <slot :item="item">{{ item.defaultText }}</slot>
    </li>
  </ul>
</template>

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

export default {
  setup() {
    return { items };
  },
};
</script>

父组件：

<template>
  <MyComponent>
    <template v-slot:default="{ item }">
      <span>{{ item }}</span>
    </template>
  </MyComponent>
</template>

<script setup>
import MyComponent from './MyComponent.vue';
</script>

在这个例子中，子组件通过作用域插槽将 item 对象传递给父组件，父组件可以使用这个数据来自定义如何渲染列表项。

总结

插槽是 Vue.js 中一个强大的功能，它允许你创建灵活和可复用的组件。通过使用默认插槽、具名插槽和作用域插槽，你可以将内容和数据从父组件传递到子组件。这些插槽的类型为构建复杂的组件提供了不同的选择，使得你的应用更加动态和强大。

---

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作

书籍详情