个人中心
gpt4 book ai didi

vue.js - Vue - 将插槽向下传递给子组件

转载 作者：行者123 更新时间：2023-12-05 02:57:46 24 4
gpt4 key购买 nike

<分区>

我想从 Vuetify 制作一个可重用的数据表组件。某些列可能包含 v-slot 以修改该列中的数据。例如:我将用户角色存储为整数，并希望它们在表中显示为 user 或 admin。目前我用这个v-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

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

24 4 0
文章推荐： python - 如何在 __str__ 方法中获取 TextChoice 枚举值
文章推荐： typescript :未定义联合的缩写，字符串是可选属性类型？
文章推荐： Azure cron 管道始终运行
文章推荐： python - 如何通过 python 电报 bot 库在固定时间或间隔从 bot 向用户发送消息？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com