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>

TestComponent

<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>

TestComponent

Вы можете получить доступ к этому слоту, написав v-slot:YourSlotName="hereIsBindData"

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