vue中如何实现跨组件传递slot（插槽）

Z时代
2024-02-07
分类：IT

开发场景：
目前有A B C组件，A组件为父组件，B为业务组件，C为开源组件并提供了具名插槽。目前准备在A组件中引入B组件（B组件是基于C组件的封装），那么A组件中如何使用C组件中支持的slot（插槽）呢？

回答：

C

<template>
  <div class="C">
    <slot name="header"></slot>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({});</script>

B

<template>
  <div class="B">
    <v-c>
      <template v-slot:header>
        <slot name="header"></slot>
      </template>
    </v-c>
  </div>
</template>
<script lang="ts">
import VC from "./C.vue";
import { defineComponent } from "vue";
export default defineComponent({
  components: { VC },
});</script>

A

<template>
  <div class="A">
    <v-b>
      <template v-slot:header>
        <span>A-B-C</span>
      </template>
    </v-b>
  </div>
</template>
<script lang="ts">
import VB from "./B.vue";
import { defineComponent } from "vue";
export default defineComponent({
  components: { VB },
});</script>

vue中如何实现跨组件传递slot（插槽）