Vue - 将插槽传递给子组件[重复]

Question

我想从 Vuetify 制作一个可重用的数据表组件。某些列可能包含 v-slot 以修改该列内的数据。例如：我将用户角色存储为整数，并希望它们显示为user 或 adminin the table. Currently I do this with thisv-slot`：

 <template v-slot:item.role="{item} ">
    {{ (item.role === 1) ? 'Administrator' : 'User' }}
 </template>

因为这不是每个数据表的用例，我想从使用数据表的父组件传递这些v-slot。我的数据表组件目前如下所示：

<template>
  <v-data-table :headers="headers" :items="items">
    <template v-slot:item.role="{item} ">
      {{ (item.role === 1) ? 'Administrator' : 'User' }}
    </template>
    <template v-slot:item.action="{ item }">
      <v-icon @click="deleteItem(item)" small>fas fa-trash</v-icon>
    </template>
  </v-data-table>
</template>

<script>
export default {
  name: "DataTable",
  props: {
    title: String,
    headers: Array,
    items: Array
  },
  methods: {
    deleteItem(item) {
      this.$emit("clicked", item);
    }
  }
};
</script>

这是我使用 DataTable 的组件（UserTable.vue）：

<template>
  <DataTable :title="title" :headers="headers" :items="items" @clicked="onDelete" />
</template>

<script>
import DataTable from "../../../components/DataTable";
import axios from "axios";

export default {
  name: "UserTable",
  components: {
    DataTable
  },
  props: {
    items: Array
  },
  data: () => ({
    title: "Users",
    headers: [
      {
        text: "Name",
        value: "name"
      },
      {
        text: "Email",
        value: "email"
      },
      {
        text: "Role",
        value: "role"
      },
      { text: "Actions", value: "action", sortable: false }
    ],
  }),
  methods: {
    onDelete(item) {
      this.$emit("clicked", item);
    }
  }
};
</script> 

在理想情况下，我希望在 UserTable 组件中包含这样的内容：

<template>
  <DataTable :title="title" :headers="headers" :items="items" @clicked="onDelete">
      <template v-slot:item.role="{item} ">
      {{ (item.role === 1) ? 'Administrator' : 'User' }}
    </template>
    <template v-slot:item.action="{ item }">
      <v-icon @click="deleteItem(item)" small>fas fa-trash</v-icon>
    </template>
  </DataTable>
</template>

然后像这样保持 DataTable 干净简单：

<template>
  <v-data-table :headers="headers" :items="items">
    <slot></slot>
  </v-data-table>
</template>

但这显然不像我预期的那样工作，因为它现在没有在所需的列中显示任何内容。我创建了一个 CodeSandBox，让你看看我现在拥有它：

https://codesandbox.io/s/priceless-bohr-oxu18?fontsize=14&hidenavigation=1&theme=dark

谁能告诉我为什么我的方法行不通，或者我该如何解决这个问题？

Answer 1

我通过查看这个答案设法解决了这个问题： https://stackoverflow.com/a/52823029/7603806

<template v-for="slot in Object.keys($scopedSlots)" :slot="slot" slot-scope="scope"><slot :name="slot" v-bind="scope"/></template>

我在DataTable 组件中添加了上面的代码，现在从使用DataTable 的UserTable 组件传递插槽。