Vue: Передача компонента во вложенный именованный слот внуков будет разрешена в слоте по умолчанию.

Созданный на 3 нояб. 2017  ·  5Комментарии  ·  Источник: vuejs/vue

Версия

2.5.2

Ссылка для воспроизведения

https://jsfiddle.net/daxchen/k75y6tu0/

Действия по воспроизведению

В моем случае у меня есть макет по умолчанию с панелью инструментов и оберткой основного содержимого. Но некоторым страницам нужен SearchBar а некоторым нет, а макеты могут иметь разные уровни.

Поэтому я создал компонент под названием LayoutDefault в качестве основы для использования в других макетах. И поскольку я хочу иметь возможность при необходимости заменять панель инструментов по умолчанию, я помещаю панель инструментов по умолчанию в <slot name="toolbar"> с Toolbar качестве резервного содержимого.

Фрагмент кода:

// LayoutDefault.vue
<slot name="toolbar">
  <Toolbar title="title from layout-inner">
    <slot name="toolbarSlot"></slot>
  </Toolbar>
</slot>

Я делаю такие компоненты, потому что хочу:

  1. При необходимости замените панель инструментов по умолчанию.
  2. Используя панель инструментов по умолчанию, но передавайте вещи в ее слот ( "toolbarSlot" в примере выше)

А затем в других компонентах макета я делаю следующее:

// LayoutLv1.vue
<div class="layout">
  <LayoutDefault>
    <slot name="toolbar" slot="toolbar"></slot>
    <slot name="toolbarSlot" slot="toolbarSlot"></slot>
    <slot>default content from Layout</slot>
  </LayoutDefault>
</div>

Как видите, для передачи компонентов в слоты внуков я использовал этот шаблон: <slot name="foo" slot="foo"> .

По какой-то причине компоненты, переданные с использованием этого шаблона, будут переданы в слот по

См. Примеры 2, 3 и 4 на воспроизведении.

Что ожидается?

Я ожидаю, что, когда в именованный слот ничего не передается, резервный контент будет отображаться вместе с его слотами.

Что на самом деле происходит?

В примере 2 замененный Toolbar отображается в слоте по умолчанию LayoutDefault .

В примерах 3 и 4 SearchBar передается в slot="toolbarSlot" , но не отображается.


Это ожидаемое поведение?
Или, если у меня есть способ сделать такие многоразовые макеты с заменяемыми частями по умолчанию, и при использовании частей по умолчанию иметь возможность передавать компоненты в их (части по умолчанию) слоты?

Самый полезный комментарий

кстати, это уже есть в 2.5.3 :)

Все 5 Комментарий

Вау, это потрясающе!
Клонировано, построено и протестировано, оно работает !!
Эван, ты лучший ~~~
Огромное спасибо!!!

кстати, это уже есть в 2.5.3 :)

Это также работает со слотом в 2.5.3? :)

@faragos вот как мне удалось передать слоты внуку, который использует слот-область видимости.

https://jsfiddle.net/alexm/5hx43mb2/

@ alex-martinez спасибо, что опубликовали свое решение, это было большим подспорьем :)

Была ли эта страница полезной?
0 / 5 - 0 рейтинги