Vue 组件：在插槽中使用插槽

Question

我将 v-data-table 作为自己的组件，以使其对我的组件更通用。我希望可以选择为该组件提供表格中每个项目的格式。这将通过一个插槽来完成。但问题是，提供的插槽有一个用于 v-data-table 的插槽。看例子，这很难解释。

在我的 DataTable 组件中，我有：

     <v-data-table 
        :headers="tableHeaders" 
        :items="items" 
        :item-key="itemKey"
        :loading="isLoading" 
        v-model="selectedRows" 
        show-select
    >        
        <!-- What do i put here? -->
    </v-data-table>

我使用其他组件中的数据表，如下所示：

    <data-table
        :table-headers="tableHeaders"
        :items="messages"
        :is-loading="isLoading"
        :selected-rows="selectedRows"
        :item-key="'MessageID'"
    >        
        <template v-slot:item.actions="{ item }">
            <v-btn :to="`messages/${item.MessageID}`" icon>
                <v-icon>mdi-chevron-right</v-icon>
            </v-btn>
        </template>
        <template v-slot:item.CreatedDateTime="{ item }">
            <span>{{ format(new Date(item.CreatedDateTime)) }}</span>
        </template>
    </data-table>

我需要将结果呈现为：

     <v-data-table 
        :headers="tableHeaders" 
        :items="items" 
        :item-key="itemKey"
        :loading="isLoading" 
        v-model="selectedRows" 
        show-select
    >        
        <template v-slot:item.actions="{ item }">
            <v-btn :to="`messages/${item.MessageID}`" icon>
                <v-icon>mdi-chevron-right</v-icon>
            </v-btn>
        </template>
        <template v-slot:item.CreatedDateTime="{ item }">
            <span>{{ format(new Date(item.CreatedDateTime)) }}</span>
        </template>
    </v-data-table>

那么问题来了，如何在 data-table 标签中提供模板以在 v-data-table 标签中呈现？

Answer 1

您将不得不重新公开“包装”组件中的插槽：

<v-data-table 
  :headers="tableHeaders" 
  :items="items" 
  :item-key="itemKey"
  :loading="isLoading" 
  v-model="selectedRows" 
  show-select
>        
  <template v-slot:body="bodyParams">
    <slot name="body" v-bind="bodyParams" />
  </template>
  <template v-slot:expanded-item="expandedParams">
    <slot name="expanded-item" v-bind="expandedParams" />
  </template>
  <template v-slot:header="headerParams">
    <slot name="header" v-bind="headerParams" />
  </template>
  <template v-slot:footer="footerParams">
    <slot name="footer" v-bind="footerParams" />
  </template>
  <template v-slot:item="itemParams">
    <slot name="item" v-bind="itemParams" />
  </template>
  <template v-slot:progress="progressParams">
    <slot name="progress" v-bind="progressParams" />
  </template>
  <!-- put here the other slots you are interested in -->
</v-data-table>