vue.js - 通过将插槽更改为作用域插槽，它不再出现在 this.$slots 和 this.$scopedslots

Question

我有一个父组件和一个子组件（它有一个 vuetify 表）。

我正在尝试使某些列显示来自父组件的芯片。我遇到了一个奇怪的问题，我不确定这是怎么回事。

父页面：（父页面比这更复杂，这就是为什么我将表格取出到另一个组件中，以便我可以将它与其他地方的其他东西结合使用）

        <simple-table
          v-if="!loading"
          :tableData="tableData"
          :loading="loading"
          :headers="headers"
          @search=""
          :selected.sync="selected"
          itemKey="groupName"
        >
          <template v-slot:userDatasetAccess="">
            <v-chip  color="red" dark>test</v-chip>
          </template>
        </simple-table>

当代码如上时，我可以看到 UserDatasetAccessColumn 中出现的芯片中的测试

子页面

<v-data-table
        :headers="headers"
        :items="tableData"
        :search="search"
        :loading="loading"
        loading-text="Loading... Please Wait"
        show-select
        :item-key="itemKey"
        v-model="selected"
        @input="$emit('update:selected',selected)"
      >
          <template v-slot:[getSlot(slot)]="{ item }" v-for="(_, slot) in $slots">
            <slot :item="item" :name="slot"></slot>
          </template>
      </v-data-table>


  methods: {
    getSlot(slot) {
      return `item.${slot}`
    }
  },

但是，当我将父级更改为：

          <template v-slot:userDatasetAccess="item">
            <v-chip  color="red" dark>{{item.userDatasetAccess}}</v-chip>
          </template>

它不再起作用了。我已经控制台记录了 this.$slots 和 this.$scopedslots 并且它们变成了空的。

所以我的问题是：为什么当我执行 v-slot:userDatasetAccess="" vs v-slot:userDatasetAccess="item" 时，它不再作为 $slots 和 $scopedslots 的一部分出现。

有没有更好的方法通过父级的插槽访问列？

标签： vue.jsvuejs2vuetify.js