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

Question

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

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>