在作用域插槽中传递道具不起作用

Question

我试图将我的 table 包装在一个槽中以实现可重用性目的，但我在传递我的 label 道具时遇到了问题：

我的主要父组件Parent.vue:

    <Table
        :headers="headers"
        :items="people"
        :search="search"
        :label="label"
    >
        <template scope="props">
        Label is: {{ label }} <!-- this label is not printing out -->
        <v-data-table :headers="props.headers" :items="people" :search="props.search">
            <template slot="items" slot-scope="props">
            <td>{{ props.item.firstName }}</td>
            <td>{{ props.item.lastName }}</td>
            <td>{{ props.item.email }}</td>
            </template>
        </v-data-table>
        </template>
    </Table>

我的 Table 组件：

<template>
  <div>
    <slot :items="items" :headers="headers" :search="search" scoped-slot="{label: label}"></slot>
  </div>
</template>

<script>
  export default {
    data() {
      return {
          label: "Some label"
      }
    },
    computed: {

    },
    props: ["items", "headers", "search"]
  }

</script>

此方法出现错误 Property or method "label" is not defined。有人可以帮助指出我在传递 label 道具时出错的地方吗？

Answer 1

您需要以 props.label 的形式访问它，而不仅仅是 label

<template slot-scope="slotProps">
  Label is: {{ slotProps.label }} <!-- this label is not printing out -->
  <v-data-table :headers="props.headers" :items="people" :search="props.search">
      <template slot="items" slot-scope="props">
      <td>{{ props.item.firstName }}</td>
      <td>{{ props.item.lastName }}</td>
      <td>{{ props.item.email }}</td>
      </template>
  </v-data-table>
</template>

并且在 Table 组件中，传递 label 就像其他绑定值一样简单：

<template>
  <div>
    <slot :items="items" :headers="headers" :search="search" :label="label"></slot>
  </div>
</template>

在作用域插槽中传递道具不起作用

Passing in prop in scoped-slot not working

javascript

slot

vue.js