VUETIFY - 如何将插槽传递给嵌套的 select 组件

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>

VUETIFY - 如何将插槽传递给嵌套的 select 组件

VUETIFY - How to pass slot to nested select component

vue.js

vuetify.js

v-slot

VSelectWithValidation

测试组件