Vue, композиция: передать свойство "слот" в качестве значения атрибута

Question

В React очень просто, так как нет «слотов». Все параметры. Но я не знаю, как передать слот в качестве параметра. Вот что я сделал.

Я создал новый компонент, который использует v-menu компонент из Vuetify :

// SelectorComponent.vue
<template>
  <v-menu>
    <template v-slot:activator="{ on }">
      <slot name="activator" v-on="on" />
    </template>
    ...

Затем я использовал этот компонент:

<Selector>
  <template v-slot:activator="{ on }">
    <v-btn text v-on="on">Type</v-btn>
  </template>
</Selector>

А при нажатии на кнопку «Тип» не показывает меню. Однако, если я заменяю слот кнопкой, он работает:

// It works!
<template>
  <v-menu outlined :close-on-content-click="false" offset-y>
    <template v-slot:activator="{ on, attrs }">
      <v-btn text v-on="on">Type</v-btn>
    </template>

что я делаю не так?

Answer 1

Вы должны использовать scoped slots, назвав слот activator и привязав атрибут on к on слоту, который может быть детализирован до вашего пользовательского компонента, внутри которого вы получите это on как <template v-slot:activator="{ on }">:

/ SelectorComponent.vue
<template>
  <v-menu>
    <template v-slot:activator="{ on }">
      <slot name="activator" :on="on" />
    </template>
    ...

затем используйте его как:

<Selector>
  <template v-slot:activator="{ on }">
    <v-btn text v-on="on">Type</v-btn>
  </template>
</Selector>