vue3-動態插槽的跨組件使用

現在有四個組件,如圖所示,調用的結構如圖所示

 

 

 為方便使用,在組件二中封裝的是一些公共插槽傳遞到組件三中進行解析,

但是不可能所有的頁面內容全部相同,所以不能將只在某個頁面中使用的插槽放到組件2中,

應該由組件一中的配置文件來決定,通過跨組件插槽來解決這個問題

下面是代碼

組件1:

        <template #status="scope">
          <el-button
            :type="scope.row.enable == 1 ? 'success' : 'danger'"
            size="small"
          >
            {{ scope.row.enable ? '啟用' : '禁用' }}
          </el-button>
        </template>

propList: [
　　{
  prop: 'enable',
  label: '狀態',
  minWidth: '100px',
  slotName: 'status'
　　}
]

 

組件2:

      <template
        v-for="item in otherPropSlots"
        :key="item.slot"
        #[item.slotName]="scope"
      >
        <slot v-if="item.slotName">
          <slot :name="item.slotName" :row="scope.row"></slot>
        </slot>
      </template>

組件3:

 <template v-for="propItem in propList" :key="propItem">
        <el-table-column align="center" v-bind="propItem" show-overflow-tooltip>
          <template #default="scope">
            <slot :name="propItem.slotName" :row="scope.row">
              {{ scope.row[propItem.prop] }}
            </slot>
          </template>
        </el-table-column>
      </template>