Vue 中的插槽（Slot）

Vue 中的插槽（Slot）是一种组件间通信的技术，它允许父组件向子组件中插入 HTML 结构或组件。

使用场景，在不同的父组件中使用某个子组件的时候，想要动态的渲染子组件的内容。子组件的部分内容可以从父组件中“传递”到子组件进行显示。

插槽是什么

下面看一个例子

写一个子组件：ChildCom.vue

<template>
    <div>
        <div>我是子组件</div>
    </div>
</template>

<!-- setup -->
<script lang="ts" setup>

</script>

1
2
3
4
5
6
7
8
9
10

写一个父组件：HomePage.vue。

在父组件中使用子组件 ChildCom。

<template>
  <div>
    <div>我是父组件</div>
    <ChildCom>
      <p>测试一下，把内容写在这里，看是否能否显示</p>
    </ChildCom>
  </div>
</template>

<!-- setup -->
<script lang="ts" setup>

import ChildCom from '@/components/ChildCom.vue';

</script>

可以看到在父组件中，使用子组件的时候，在子组件标签中间添加的内容是看不见的。

那如果我想实现显示父标签中，子标签中间添加的内容，该怎么办？

修改子组件：ChildCom.vue ，添加一个 <slot></slot> 标签：

<template>
    <div>
        <div>我是子组件</div>
        <slot></slot>
    </div>
</template>

<!-- setup -->
<script lang="ts" setup>

</script>

1
2
3
4
5
6
7
8
9
10
11

在子组件中添加了一个 slot 插槽。那么在父组件中使用子组件的时候，子标签中的内容就回显示到子组件的 slot 插槽中。