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>