vue 插槽的嵌套

插槽只能在根節點，如果封裝一個組件a，這個組件里使用到了另一個組件b，組件b中也有插槽。組件a想在插槽中預留b的插槽（如再次封裝antdv的table組件，table本身有插槽，此時你想在自己封裝的myTable中預留一個插槽用於放入table的插槽）這個時候會報錯，提示插槽只能在根節點中。解決方法如下：

    <!-- 表格區域 -->
    <!-- :scopedSlots="{ $scopedSlots }"， 這樣在使用組件的外部直接寫slot就可以正常渲染 -->
    <a-table ref="TableInfo"
      bordered
      :columns="propData.tableColumns"
      :rowKey="(record,index) => { return record.id || index }"
      :dataSource="dataSource"
      :pagination="pagination"
      :loading="loading"
      :scopedSlots="{ $scopedSlots }"
      @change="handleTableChange">
        <template v-for="(index, name) in $scopedSlots" v-slot:[name]="text, record">
          <slot :name="name" v-bind="{text, record}"></slot>
        </template>
    </a-table>

使用自定義組件，假設表格的columns的一列預留了enable的具名插槽：

<BasicQuery ref="basic">
    <!-- 表格內的插槽 -->
    <template v-slot:enable="{text, record}">
      <a-switch :checked="text" checked-children="開" un-checked-children="關" @change="changeStatus($event, record)" />
    </template>
  </BasicQuery>