VUETIFY - 如何将插槽传递给嵌套选择组件

Question

我正在使用vuetify 的最新版本并试图弄清楚如何使插槽工作。关于 select 的文档可以在here找到。

VSelectWithValidation

<v-select v-model="innerValue" :error-messages="errors" v-bind="$attrs" v-on="$listeners">
  <template slot="selection" slot-scope="data">
      {{ data.item.name }}
  </template>
   <template slot="item" slot-scope="data">
      {{ data.item.name }} - {{ data.item.description }}
  </template>
</v-select>

测试组件

<VSelectWithValidation
    rules="required"
    :items="items"
    v-model="select"
    label="Select">
    // I WOULD LIKE SLOTS TO BE AT THIS LEVEL
</VSelectWithValidation>

基本上，我希望自定义插槽，因此我需要将它们移出VSelectWithValidation 组件以在TestComponent 上设置

我尝试了不同的变体，但没有成功。

https://codesandbox.io/s/veevalidate-components-vuetify-u11fd

Answer 1

VSelectWithValidation

您需要在模板插槽项中创建插槽并将范围数据绑定到能够从其他组件中使用..

<template slot="item" slot-scope="data">
   <slot name="item" v-bind="data"></slot>
</template>

测试组件

您可以通过编写 v-slot:YourSlotName="hereIsBindData"

访问该插槽

<template v-slot:item="data">
    {{ data.item.name }} // you can code here whatever you like
</template>