vue3同级组件使用插槽具体事例

在 Vue3 中，插槽（Slot）是用于子组件向父组件传递可复用的内容或占位符的一种机制。它可以帮助我们组织和重用 UI 元素，特别是在同级组件之间共享部分结构。

举个例子，考虑两个同级的组件 `FatherComponent` 和 `ChildComponent`：

<!-- FatherComponent.vue -->
<template>
  <div class="father">
    <!-- 这里有一个插槽 -->
    <slot></slot>
    <!-- 另外的内容 -->
    <p>这是父亲组件自己的内容</p>
  </div>
</template>

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

const child = () => (ChildComponent);
</script>

在这个 `FatherComponent` 中，`<slot>` 标签定义了一个插槽区域。现在我们可以这样使用：

<!-- ChildComponent.vue -->
<template>
 <div class="child">
    <!-- 插入到父组件的插槽中 -->
    <slot name="custom-slot">这是一段默认内容</slot>
  </div>
</template>

<script setup>
export default {
  // 如果有自定义需求，可以设置 slotProps 或者 name 属性
  // slotProps: { message: String }
};
</script>

在 `ChildComponent` 中，我们也定义了一个插槽，名字是 "custom-slot"。如果我们在 `FatherComponent` 中使用这个子组件并传入内容：

<!-- 使用 FatherComponent 并传递插槽内容 -->
<FatherComponent>
  <ChildComponent>
    <!-- 在这里插入定制内容 -->
    <template v-slot:custom-slot>
      <h1>这是一个定制标题</h1>
      <p>这是一个定制段落</p>
    </template>
  </ChildComponent>
</FatherComponent>

这样，`<h1>` 和 `<p>` 就会出现在 `FatherComponent` 的插槽位置，显示为“这是一个定制标题”和“这是一个定制段落”。通过这种方式，即使父子组件层级相同，也可以方便地复用和定制内容。