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>