跨组件插槽|动态插槽|公共插槽|插槽嵌套

输出

图解

代码

outlayer.vue

<template>
  <div class="unit">
    <table border="1">
      innerlayer
      <template v-for="item in slotList" :key="item.name">
        <slot :name="item.name">
          <h6>{{ item.name }}</h6>
        </slot>
      </template>
    </table>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { SlotList } from './types'

export default defineComponent({
  name: 'unit',
  props: {
    slotList: {
      type: Array as PropType<SlotList[]>,
      required: true
    }
  },
  components: {},
  setup() {
    return {}
  }
})
</script>

<style scoped></style>

middle.vue

<template>
  <div class="middle">
    <table border="1">
      middlelayer
      <unit :slotList="slotList">
        <!-- 固定插槽:一般我们把一些公共的插槽放在这里 -->
        <template #slotA>
          <h6>固定插槽|公共插槽:这是从middle.vue传递过来的插槽内容A</h6>
        </template>
        <template #slotC>
          <h6>固定插槽|公共插槽:这是从middle.vue传递过来的插槽内容C</h6>
        </template>
        <!-- 跨组件插槽 | 插槽中嵌套插槽: 这里的插槽是不同组件的插槽变化 -->
        <template v-for="item in dynamicSlotList" :key="item.name" #[item.name]>
          <slot :name="item.name"></slot>
        </template>
      </unit>
    </table>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { SlotList } from './types'
import Unit from './unit.vue'

export default defineComponent({
  name: 'middle',
  props: {
    slotList: {
      type: Array as PropType<SlotList[]>,
      required: true
    }
  },
  components: {
    Unit
  },
  setup(props) {
    const dynamicSlotList: SlotList[] = props.slotList?.filter(
      (item: SlotList) => {
        return item.isFixed ? false : true
      }
    )
    return {
      dynamicSlotList
    }
  }
})
</script>

<style scoped></style>

inner.vue

<template>
  <div class="unit">
    <table border="1">
      innerlayer
      <template v-for="item in slotList" :key="item.name">
        <slot :name="item.name">
          <h6>{{ item.name }}</h6>
        </slot>
      </template>
    </table>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { SlotList } from './types'

export default defineComponent({
  name: 'unit',
  props: {
    slotList: {
      type: Array as PropType<SlotList[]>,
      required: true
    }
  },
  components: {},
  setup() {
    return {}
  }
})
</script>

<style scoped></style>