Можно ли переиспользорать слоты в компанентах vue?

Question

[Антон П.]

Есть компонент отвечающий за header, в него я передаю меню через <slot name="menu"></slot>.
Этот слот мне нужен в двух местах, в основном header сайта, и в fixed-header (он появляется, когда пользователь скролит сайт вниз).
Vue.js при донной манипуляции выдает ошибку, но не падает, сайт работает нормально!

Duplicate presence of slot "menu" found in the same render tree - this will likely cause render errors.

На сколько я понимаю из фразы "this will likely cause render errors" (это, возможно, вызовет ошибки рендеринга), то это больше не ошибка, а очень важное предупреждение.

Дак вот, на сколько это предупреждение важно?
Можно ли дублировать слоты? Может это как то по другому нужно делать? (В документации не нашел ни чего про это)
Делал ли уже кто-нибудь так?

Comments

[markmariner]

Не совсем понятно, в чём проблема. Почему в fixed-header не сделать слот с другим именем и не положить в него то же самое меню? Ну и это меню можно вынести в компонент, чтобы не дублировать код.

[Антон П.]

markmariner, два слота сделать конечно можно, но это не красиво.
Вынести в один компонент тоже не получится, так по сути это две разные менюшки, они выглядят по разному, взаимодействуют с пользователем по разному.
Даже если сделать эти менюшки одним компонентом, то повторений не избежать, его все ровно придется вызывать в двух местах и передавать им меню через слоты.
Передаю я через слоты, а не по json именно потому, что мне нужно, что бы эта инфа была на сайте до отработки JS, для поисковых роботов.

Я еще раз пробежался по API Vue, есть такое свойство как this.$slots, в нем содержатся все слоты переданные в компонент, можно будет воспользоваться document.createElement добавления слотов в нужное место.

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

[alex-1917]

компОненты

Answer 1

[fl3nkey]

Можете использовать Render-функции.

{
  components: {
    Render: {
      functional: true,
      render: (h, ctx) => ctx.props.vnode
    }
  }
}

<div class="header">
  <render :vnode="$slots.menu"></render>
</div>
<div class="fixed-header">
  <render :vnode="$slots.menu"></render>
</div>

https://ru.vuejs.org/v2/guide/render-function.html...
https://ru.vuejs.org/v2/guide/render-function.html...
https://ru.vuejs.org/v2/api/#vm-slots

Comments

[Антон П.]

Спасибо большое, код рабочий. Вечером нужно будет почитать про Render-функции, что бы понять почему это работает

[fl3nkey]

Антон П., this.$slots.menu это массив vNode, которые успешно съедает Render-функции,

https://ru.vuejs.org/v2/guide/render-function.html...
https://ru.vuejs.org/v2/guide/render-function.html...