Vue2 和 Vue3 中的插槽（Slot）详解

阿贾克斯的黎明

于 2024-10-03 23:26:46 发布

阅读量438

点赞数 6

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_57836225/article/details/142697785

版权

前端专栏收录该内容

71 篇文章 0 订阅

订阅专栏

Vue2 和 Vue3 中的插槽（Slot）详解

一、插槽的作用及使用场景

二、Vue2 和 Vue3 中的插槽类型

1. 匿名插槽（Anonymous Slot）

2. 具名插槽（Named Slot）

3. 作用域插槽（Scoped Slot）

三、总结

在 Vue 开发中，插槽是一个非常强大的功能，它允许我们在组件中定义可插入内容的区域，从而实现更加灵活的组件复用。本文将详细介绍 Vue2 和 Vue3 中的插槽类型，并通过代码示例进行讲解。

一、插槽的作用及使用场景

插槽就像现实生活中的插排一样，一个页面提供了一些可插入或可不插入的内容。在某些业务场景下，我们可能需要在不同的页面中复用同一个组件，但这些页面又有一些不同的部分需要定制。这时，插槽就可以发挥作用了。

例如，我们有一个页面包含一段文字、一个文本域、一个温馨提示和一个返回箭头及发布按钮。而另一个页面只有发布按钮，没有上面和下面的文字及温馨提示。在这种情况下，我们可以使用插槽来实现这种灵活的布局。

插槽更多地应用在组件封装和插件开发中。比如在一些 UI 库（如 Element UI）中，就大量使用了插槽的写法，使组件更加灵活可定制。

二、Vue2 和 Vue3 中的插槽类型

1. 匿名插槽（Anonymous Slot）

匿名插槽顾名思义就是没有名字的插槽。在 Vue2 和 Vue3 中，匿名插槽的使用方式基本相同。

以下是一个 Vue3 的示例代码：

<template>
  <div>
    <slot></slot>
  </div>
</template>

在使用这个组件时，如果不插入任何内容，匿名插槽的位置将不会显示任何内容。如果插入内容，例如：

<template>
  <div>
    <MyComponent>
      <p>这是插入的内容</p>
    </MyComponent>
  </div>
</template>

那么在 MyComponent 组件中，<slot></slot> 的位置将显示 <p>这是插入的内容</p>。

2. 具名插槽（Named Slot）

具名插槽就是有名字的插槽。在 Vue3 中，我们可以使用 v-slot 指令来指定插槽的名称。

以下是一个具名插槽的示例代码：

<template>
  <div>
    <slot name="header"></slot>
    <slot name="content"></slot>
    <slot name="footer"></slot>
  </div>
</template>

在使用这个组件时，我们可以通过指定插槽的名称来插入不同的内容：

<template>
  <div>
    <MyComponent>
      <template v-slot:header>
        <h1>这是头部内容</h1>
      </template>
      <template v-slot:content>
        <p>这是主体内容</p>
      </template>
      <template v-slot:footer>
        <p>这是底部内容</p>
      </template>
    </MyComponent>
  </div>
</template>

3. 作用域插槽（Scoped Slot）

作用域插槽可以在父组件中访问子组件的数据，并将其传递给插槽内容。在 Vue3 中，我们可以使用 v-slot 指令和函数参数来接收子组件传递的数据。

以下是一个作用域插槽的示例代码：

<template>
  <div>
    <slot :data="data"></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      data: ['A', 'B', 'C'],
    };
  },
});
</script>

在使用这个组件时，我们可以通过接收子组件传递的数据来进行循环展示：

<template>
  <div>
    <MyComponent>
      <template v-slot="{ data }">
        <div v-for="item in data" :key="item">{{ item }}</div>
      </template>
    </MyComponent>
  </div>
</template>