Vue3中实现插槽使用

目录

一、前言

二、插槽类型

三、示例

四、插槽的分类实现

[1. 基本插槽](#1. 基本插槽)

[2. 命名插槽](#2. 命名插槽)

[3. 默认插槽内容](#3. 默认插槽内容)

[4. 作用域插槽（Scoped Slots）](#4. 作用域插槽（Scoped Slots）)

[5. 多插槽与具名插槽组合](#5. 多插槽与具名插槽组合)

---

一、前言

在 Vue 3 中，插槽（Slot）用于实现组件的内容分发机制，它允许你将父组件的内容传递给子组件，从而实现组件的灵活组合和重用。Vue 3 插槽的基本使用和 Vue 2 有些相似，但也引入了一些新的特性。下面是一些常见的插槽使用方式。

二、插槽类型

Vue 3 插槽的使用方式非常灵活，允许你根据需求选择最适合的插槽类型：

• 默认插槽：用于简单的内容传递。
• 命名插槽：用于多个插槽，帮助你分配不同内容到不同的位置。
• 作用域插槽：允许子组件传递数据给父组件，以便父组件动态渲染插槽内容。
• 具名插槽组合：可以在一个组件中使用多个具名插槽，灵活分配父组件的内容。

三、示例

分析：

当你需要实现该页面的的布局时，是否会想到使用插槽来优化代码？以上页面中，我的任务、检测反馈、监控区域、人脸设别告警、设备总览六个模块中，框架的模板使用的是同一个框架，所以在这时就可以像以下图中进行组件优化。

代码示例：

首先，你需要在src/components/目录下创建一个子组件TaskFeedback.vue，并添加如下代码：

<template>
  <div class="task-feedback">
    <!-- 使用具名插槽 -->
    <slot name="header"></slot>

    <!-- 默认插槽 -->
    <slot></slot>

    <!-- 其他插槽 -->
    <slot name="footer"></slot>
  </div>
</template>

<script>
export default {
  name: 'TaskFeedback',
};
</script>

<style scoped>
.task-feedback {
  /* 添加样式 */
}
</style>

然后，在父组件中引入并使用TaskFeedback组件，并通过插槽传递内容：

<!-- 在父组件中使用 TaskFeedback 组件 -->
<template>
  <div>
    <TaskFeedback>
      <!-- 插入头部内容到 header 插槽 -->
      <template v-slot:header>
        <h1>我的任务检测反馈</h1>
      </template>

      <!-- 插入主要内容到默认插槽 -->
      <table>
        <thead>
          <tr>
            <th>类型</th>
            <th>告警时间</th>
            <th>位置</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in feedbackItems" :key="index">
            <td>{{ item.type }}</td>
            <td>{{ item.time }}</td>
            <td>{{ item.location }}</td>
          </tr>
        </tbody>
      </table>

      <!-- 插入底部内容到 footer 插槽 -->
      <template v-slot:footer>
        <p>总数据量: {{ totalDataCount }}</p>
      </template>
    </TaskFeedback>
  </div>
</template>

<script>
import TaskFeedback from './components/TaskFeedback.vue';

export default {
  components: {
    TaskFeedback,
  },
  data() {
    return {
      feedbackItems: [
        { type: '温度异常', time: '2023-08-20 16:21:29', location: '园区A区' },
        // 更多数据...
      ],
      totalDataCount: 50,
    };
  },
};
</script>

我们使用了三个插槽：

• v-slot:header用于插入头部内容。
• 默认插槽用于插入主要的内容。
• v-slot:footer用于插入底部内容。

可以根据实际需要自定义每个插槽的内容，使界面更具灵活性和可扩展性。

四、插槽的分类实现

1. 基本插槽

基本插槽允许父组件传递内容到子组件中的指定位置。父组件内容会替换子组件中指定 <slot> 标签的位置

<!-- Parent.vue -->
<template>
  <Child>
    <p>This is some content from the parent</p>
  </Child>
</template>

<script>
import Child from './Child.vue';
export default {
  components: { Child }
};
</script>

<!-- Child.vue -->
<template>
  <div>
    <slot></slot>  <!-- 插槽的位置 -->
  </div>
</template>

在这个例子中，父组件 Parent 向子组件 Child 传递了 <p> 标签内容，这些内容会替换子组件中的 <slot></slot> 部分。

2. 命名插槽

如果你需要多个插槽，可以为每个插槽指定一个名称。父组件可以将内容插入到指定的命名插槽中。

<!-- Parent.vue -->
<template>
  <Child>
    <template #header>
      <h1>Header Content</h1>
    </template>
    <template #footer>
      <p>Footer Content</p>
    </template>
  </Child>
</template>

<script>
import Child from './Child.vue';
export default {
  components: { Child }
};
</script>

<!-- Child.vue -->
<template>
  <div>
    <header>
      <slot name="header"></slot>  <!-- 命名插槽 -->
    </header>
    <footer>
      <slot name="footer"></slot>  <!-- 命名插槽 -->
    </footer>
  </div>
</template>

在这个例子中，父组件为 header 和 footer 插槽分别传递了内容。子组件通过 <slot name="header"> 和 <slot name="footer"> 分别插入不同的内容。

3. 默认插槽内容

如果父组件没有传递内容给某个插槽，可以为插槽指定默认内容。

<!-- Parent.vue -->
<template>
  <Child>
    <!-- 没有传递给插槽内容，使用默认插槽内容 -->
  </Child>
</template>

<script>
import Child from './Child.vue';
export default {
  components: { Child }
};
</script>

<!-- Child.vue -->
<template>
  <div>
    <slot>默认内容</slot>  <!-- 如果父组件没有传递内容，将使用默认内容 -->
  </div>
</template>

当父组件没有传递任何内容时，子组件中的 <slot> 会显示默认内容"默认内容"。

4. 作用域插槽（Scoped Slots）

有时你需要在插槽中传递一些数据给父组件，这时候就需要使用作用域插槽。作用域插槽允许子组件将数据传递给父组件，让父组件能动态渲染插槽内容。

<!-- Parent.vue -->
<template>
  <Child v-slot:default="slotProps">
    <p>接收到的 message: {{ slotProps.message }}</p>
  </Child>
</template>

<script>
import Child from './Child.vue';
export default {
  components: { Child }
};
</script>

<!-- Child.vue -->
<template>
  <div>
    <slot :message="message"></slot>  <!-- 通过作用域插槽将数据传递给父组件 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from Child!'
    };
  }
};
</script>

在这个例子中，子组件通过 v-slot 绑定了一个作用域插槽，传递了一个 message 给父组件。父组件通过 slotProps 获取到这个数据并显示。

5. 多插槽与具名插槽组合

你可以在一个组件中使用多个具名插槽，这允许父组件根据不同的插槽名称传递不同的内容。

<!-- Parent.vue -->
<template>
  <Child>
    <template #header>
      <h1>This is the header</h1>
    </template>
    <template #main>
      <p>This is the main content</p>
    </template>
    <template #footer>
      <p>This is the footer</p>
    </template>
  </Child>
</template>

<script>
import Child from './Child.vue';
export default {
  components: { Child }
};
</script>

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

这里，父组件为 header、main 和 footer 提供了不同的内容，子组件会根据插槽名称进行插入。