有没有办法将插槽与 vuetify 数据表组件一起使用？答案

【问题标题】：Is there a way to use slot with vuetify datatable components?有没有办法将插槽与 vuetify 数据表组件一起使用？
【发布时间】：2020-12-07 21:35:12
【问题描述】：

这是我的组件（我们称之为 BaseTable）：

  <v-card>
    <v-card-title>
      {{ title }}
      <v-spacer></v-spacer>
      <v-text-field
        :value="value"
        @input="$emit('input', $event)"
        append-icon="mdi-magnify"
        label="Search"
        single-line
        hide-details
      ></v-text-field>
    </v-card-title>
    <v-data-table
      :search="value"
      :headers="headers"
      :items="items"
      :loading="loading"
      :loading-text="loadingText"
    >
      <slot></slot> <!--Will pass something here -->
    </v-data-table>
  </v-card>
</template>

然后我想像这样在 Actions 列中通过一个按钮重用 BaseTable：

 <BaseTable
      :headers="headers"
      :items="items"
      :loading="loading"
      loadingText="Getting items... Please wait"
      title="Transfer Request Processing"
      v-model.lazy="search"
    >
      <template v-slot:item.actions="{ item }">
        <v-btn block color="warning" outlined @click="delete(item)">
          <v-icon left class="mr-2">mdi-icon</v-icon>DELETE
        </v-btn>
      </template>
    </BaseTable>

数据以正确的标题显示，但“删除”按钮没有。我尝试在组件本身上使用模板（效果很好），但我不希望这样。非常感谢您的帮助。

【问题讨论】：

标签： vue.js vue-component vuetify.js

【解决方案1】：

我想通了。我不得不使用作用域插槽。

我所要做的就是将以下内容放在子组件数据表中：

<template v-for="(slot, name) in $scopedSlots" v-slot:[name]="item">
   <slot :name="name" v-bind="item"></slot>
</template>

然后在父级中：

<template v-slot:item.actions="{ item }">
   <v-btn block color="warning" outlined @click="delete(item)">
      <v-icon left class="mr-2">mdi-icon</v-icon>DELETE
   </v-btn>
</template>

读完下面两篇文章后，我开始工作了，但鉴于我是 Vue.js 的新手，我仍然没有完全理解它背后的科学

https://vuejsdevelopers.com/2017/10/02/vue-js-scoped-slots/

和

https://css-tricks.com/using-scoped-slots-in-vue-js-to-abstract-functionality/

（帮助我的两篇文章）。

【讨论】：

【解决方案2】：

是的，可以pass slot content to a grandchild。

它涉及在后代（您的BaseTable）中使用命名槽元素，并在更高组件中使用带有 v-slot 的模板元素。比如：

// BaseTable
...
    <slot name="actions :props></slot>
...

// Parent
<BaseTable>
    <template v-slot:actions="props"></template>
</BaseTable>

【讨论】：

你能说清楚一点吗？记下我要完成的工作，尤其是使用 vuetify 数据表。正如你所说，我尝试使用命名插槽，但它不起作用。