具名插槽的使用

如下：index.vue、A：ChangeObjectInspector.vue、B：ChangeApplicationBtn.vue

index.vue

  <div>
    <change-object-inspector
      :objectEID="objectEID"
      :maintabActiveKey="tabData.activeKey"
      @closeObject="objectInspectorVisibleHand"
      @getDetailViewBtnName="getDetailViewBtnName"
      ref="objectViewer"
    >
      <template v-slot:topRightButton v-if="detailMenuName">
        <component
          :is="getBtnComponent()"
          :detailMenuName="detailMenuName"
        ></component>
      </template>
    </change-object-inspector>
  </div>

import changeBtnModules from '.indexts';
import ChangeObjectInspector from '@/views/project/ChangeObjectInspector.vue';
setup:
  const getBtnComponent = () => {
      return changeBtnModules[ChangeApplicationBtn];
    };

indexts:
import { defineAsyncComponent } from 'vue';
export default {
  ChangeApplicationBtn: defineAsyncComponent(() => import('./ChangeApplicationBtn.vue')),
};

ChangeObjectInspector.vue

......
 <div>
       <slot name="topRightButton"></slot>
 </div>
......