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>

 

上一篇:django.core.exceptions.ImproperlyConfigured: Error loading MySQLdb module. 解决方法


下一篇:element-ui loading加载组件的使用与样式配色