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

Posted 2023-02-22

【中文标题】Vue - 将插槽传递给子组件[重复]

【英文标题】：Vue - pass down slots to child components [duplicate]

【发布时间】：2020-04-23 20:02:29

【问题描述】：

我想从 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

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

【问题讨论】：

这能回答你的问题吗？ vue - how to pass down slots inside wrapper component?

【参考方案1】：

我通过查看这个答案设法解决了这个问题： https://***.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 组件传递插槽。