Javascript 在作用域插槽中通过支柱不工作

Javascript 在作用域插槽中通过支柱不工作,javascript,vue.js,slot,Javascript,Vue.js,Slot,为了便于重用,我试图将我的表包装在插槽中,但在传递我的标签时遇到了问题 我的主要父组件parent.vue: <Table :headers="headers" :items="people" :search="search" :label="label" > <template scope="props"> Label is: {{ 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>

此方法给我错误
属性或未定义方法“标签”
。有人能帮我指出我在传递
标签
道具时哪里出了问题吗?

你需要以
道具的形式访问它。标签
而不仅仅是
标签

<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>
<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>
<template>
  <div>
    <slot :items="items" :headers="headers" :search="search" :label="label"></slot>
  </div>
</template>