vue父子孙多级slot插槽传值

之前是封装的iview的table，但是现在iview的table数据量大100条分页卡顿换成vxe-table 详见上篇文章，所以变成三级传slot了  。。。

最外层组件

<IViewTable>
      <template v-slot:action="{ row }">
        <Dropdown
          transfer
          @on-click="
            e => {
              handleDropdownClick(e, row)
            }
          "
        >
          <div>
            处理
            <Icon type="ios-arrow-down"></Icon>
          </div>
          <DropdownMenu slot="list">
            <DropdownItem name="处置">处置</DropdownItem>
            <DropdownItem name="忽略">忽略</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </template>
    </IViewTable>

中间层组件

<vTable :table="table" :checkbox="checkbox" @on-selection-change="SelectionChange">
          <!-- 自定义插槽 -->
          <template v-for="item in table.columns" v-slot:[item.slot]="{ row }">
            <slot v-if="item.slot" :name="item.slot" :row="row"></slot>
          </template>
        </vTable>

最底层组件

 <vxe-column
        v-for="(column, index) in table.columns"
        :key="column.key + index"
        :field="column.key"
        :title="column.title"
        :min-width="column.minWidth"
        :width="column.width"
        :fixed="column.fixed"
        :align="column.align"
        :title-suffix="column.titleSuffix"
        :show-overflow="column.key !== 'action' ? 'tooltip' : false"
      >
        <!-- 渲染形式 -->
        <template #default="scope" v-if="column.render">
          <renderer :renderContent="column.render" :scope="scope"></renderer>
        </template>
        <!-- 自定义插槽 -->
        <template #default="scope" v-else-if="column.slot">
          <slot :name="column.slot" :row="scope.row"></slot>
        </template>
      </vxe-column>