Vue3教程 - 19 插槽

和 Vue2 中的用法基本一样。

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

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

19.1 插槽是什么

下面看一个例子

写一个子组件：ChildCom.vue

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

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

</script>

写一个父组件：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>

运行代码，效果如下：

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

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

内容未完......

查看完整内容 →