vue3 插槽父传孙 跨级组件传插槽

在Vue3中，插槽（Slots）是一种强大的特性，用于内容复用和父子组件间的通信。如果你想要在跨级组件之间传递插槽，通常涉及到祖孙组件间的父子传递。这种场景下，父组件可以定义默认插槽（default slot），然后孙子组件通过`slot="name"`传递自定义内容到这个默认插槽。

例如，假设有一个GrandParent.vue组件作为外层容器：

<template>
  <div>
    <ChildComponent :slot="grandChildSlot" />
  </div>
</template>

<script>
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      grandChildSlot: 'default'
    };
  }
};
</script>

然后是MiddleComponent.vue作为中间层级组件：

<template>
  <div>
    <GrandChildComponent v-slot="{ slotContent }">
      <!-- 这里使用 slot-content 作为插槽接收的内容 -->
      {{ slotContent }}
    </GrandChildComponent>
  </div>
</template>

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

最后是GrandChildComponent.vue，孙子组件直接将插槽内容渲染出来：

<template>
  <slot :name="customSlotName" />
</template>

<script>
export default {
  props: ['customSlotName'],
};
</script>

当你实例化GrandParent组件并给`grandChildSlot`赋值，比如`<GrandParent :grandChildSlot="specialSlotName">`，这时MiddleComponent的`slot-content`将会显示特殊的插槽内容。