跨组件动态插槽传递

通过$slot和$slotScope获取到父组件定义的插槽和作用域插槽，在模板遍历渲染。

在第三方组件上再封装一层

可以用这个方法，让使用的父组件，可以使用第三方组件的插槽

统一整个项目的默认样式

<template>
  <a-modal
    v-bind="_attrs"
    v-on="$listeners">
    <slot></slot>

    <!-- 处理 slots -->
    <template v-for="slotName of slotsKeys" v-slot:[slotName]>
      <slot :name="slotName"></slot>
    </template>

    <!-- 处理 scopedSlots -->
    <template v-for="slotName of scopedSlotsKeys" :slot="slotName">
      <slot :name="slotName"></slot>
    </template>

	<!-- <template v-for="slotName in scopedSlotsKeys" #[slotName]="scoped">
		<slot :name="slotName" v-bind="scoped"></slot>
	</template> -->
  </a-modal>
</template>

export default {
  name: 'MyModal',
  props: {
    // 
  },
  data() {
    return {
      // 内部使用的 slots 不再处理
      usedSlots: []
    };
  },
  computed: {
    _attrs() {
      const attrs = {
        ...this.$attrs
      };
      return attrs;
    },
    scopedSlotsKeys() {
      return Object.keys(this.$scopedSlots).filter(key => !this.usedSlots.includes(key))
    },
    slotsKeys() {
      return Object.keys(this.$slots).filter(key => !this.usedSlots.includes(key))
    }
  }
}