Вложенные слоты Vuejs: как передать слот внуку

Question

Я использую разные компоненты vuetify, например v-menu .У него есть такой шаблон:

<v-menu>
  <a slot="activator">menu</a>
  <v-list>
    <v-list-tile>Menu Entry 1</v-list-tile>
    <v-list-tile>Menu Entry 2</v-list-tile>
  </v-list>
</v-menu>

Предположим, я хочу добавить еще одну обертку вокруг него.Это мой специальный компонент меню, который имеет несколько предопределенных пунктов меню.И я хочу, чтобы он также имел слот для активатора.И последний должен быть как-то назначен на оригинальный слот активатора v-menu.Возможно ли это?

Пример:

// index.vue: 
<template>
  <my-special-menu>
    <button>My special menu trigger</button>
  </my-special-menu>
</template>

// MySpecialMenu.vue
<template>
  <v-menu>
    <slot slot="activator"/> <-- I don't know how to write this line
    <v-list>...</v-list>
  </v-menu>
</template>

<slot slot="activator"> - неправильное уравнение.Цель состоит в том, чтобы извлечь содержимое из родительского элемента (то есть <button>..</button> в примере) и использовать его как slot="activator" в v-меню.

Я могу написать его так:

<v-menu>
  <a slot="activator"><slot/></a>
  ...
</v-menu>

Но в этом случае шаблон результата будет:

<div class="v-menu__activator">
  <a>
    <button>My special menu trigger</button>
  </a>
</div>

Это не совсем то, что я хочу.Можно ли здесь избавиться от <a> оболочки?

Обновление: мы можем использовать конструкцию типа <template slot="activator"><slot name="activator"/></template>, чтобы бросить какой-нибудь слот внучему ребенку.Но что, если у нас есть несколько слотов и мы хотим проксировать их все?Это похоже на наследование атрибутов и v-bind="$attrs" для слотов.Возможно ли это в настоящее время?

Например, в vuetify есть компонент <v-autocomplete>, который имеет слоты добавления, предоплаты, метки, отсутствия данных, прогресса, элемента, выбора и т. Д.Я пишу некоторый компонент обертки вокруг этого, в настоящее время он выглядит так:

<template>
  <v-autocomplete ..>
    <template slot="append"><slot name="append"/></template>
    <template slot="prepend"><slot name="prepend"/></template>
    <template slot="label"><slot name="label"/></template>
    ...
    <template slot="item" slot-scope="props"><slot name="item" v-bind="props"/></template>
  </v-autocomplete>
</template>

Можно ли здесь избежать перечисления всех слотов?

Answer 1

Если вы поместите атрибут slot в элемент html, этот элемент html будет передан дочернему компоненту, чтобы заполнить слот с таким именем.Если вы не хотите передавать html-элемент, вы можете использовать slot для тега template в вашем компоненте.Тег шаблона группирует элементы, но не отображает элемент HTML, что здесь идеально.Вы можете использовать теги шаблона также для других целей, например, для группировки элементов в v-if, например, или для повторения нескольких элементов с v-for.

// App.vue
<template>
  <div id="app">
    <test>
      <template slot="activator">
        Click <b>me</b>!
      </template>
    </test>
  </div>
</template>

// Test.vue
<template>
  <div class="wrapper">
    <grand-child>
      <template slot="activator">
        <slot name="activator"></slot>
      </template>
    </grand-child>

    This is some text
  </div>
</template>

// GrandChild.vue
<template>
  <div>
    <a href="#" @click="toggle = !toggle">
      <slot name="activator">Default</slot>
    </a>

    <div v-if="toggle">This appears and disappears</div>
  </div>
</template>

Редактировать: если вы хотите сделать это для произвольных слотов, это также возможно.this.$slots содержит слоты и их содержимое, поэтому с помощью чего-то вроде следующего вы можете передать содержимое слота в слот с таким же именем:

<grand-child>
  <template v-for="(_, slot) in $slots">
    <template :slot="slot">
      <slot :name="slot"></slot>
    </template>
  </template>
</grand-child>