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>