Дочерний компонент представления передается в родительский макет Vue - PullRequest
Новая
       9

Дочерний компонент представления передается в родительский макет Vue

0 голосов
/ 30 апреля 2018

TL; DR: возможно ли передать содержимое в определенный слот компонента, указанного в родительском компоненте, из дочернего компонента?

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

Проблема, с которой я сталкиваюсь, заключается в том, что у меня есть основной макет, упрощенный ниже: 

<template>
  <div id="app">
    <Nav/>
    <APageWithDifferentNav/>
  </div>
</template>

<script>
  import Home from "./components/views/Home";
  import APageWithDifferentNav from "./components/views/APageWithDifferentNav";
  import Nav from "./components/Nav";

  export default {
    name: "App",
    components: {
      Nav, Home, APageWithDifferentNav
    }
  };
</script>

И компонент nav примерно такой: 

<template>
  <div class="nav">
    <ul class="nav__list">
      <li class="nav__list-item">always show this nav item</li>
    </ul>
    <slot>
      <ul class="nav__list replace-this">
        <li class="nav__list-item">only show this</li>
        <li class="nav__list-item">if no slot</li>
        <li class="nav__list-item">content provided</li>
      </ul>
    </slot>
  </div>
</template>

<script>
  export default {
    name: "Nav"
  };
</script>

Я хочу иметь возможность изменить слот внутри компонента Nav из компонента представления.

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

Могу ли я сделать это, не перемещая <Nav/> внутри шаблона каждой страницы?

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

Любая помощь очень ценится.

1 Ответ

0 голосов
/ 30 апреля 2018

AFAIK возможно передавать содержимое слота только от родителя к потомку.

Возможно, вы можете получить что-то подобное, используя PortalVue , который позволяет отображать DOM вне определяющего компонента, и используя некоторые v-if, чтобы отключить отображение части по умолчанию.

Но, на мой вкус, это слишком сложное решение. Иногда лучше всего нарушить принцип СУХОГО (не повторять себя) и вызывать компонент Nav на каждой странице, с вариациями, где это необходимо, или просто создать совершенно другую страницу для тех немногих видов с другой навигацией, скажем /login, /logout, ... и на верхнем уровне используйте динамические компоненты с v-bind: is , чтобы выбрать, какой компонент представления следует визуализировать (поэтому у вас есть один общий компонент приложения для всех обычных страниц с использованием обычного компонента Nav и одного (или более, при необходимости) альтернативного компонента LoginLogoutApp с использованием другого LoginLogoutNav).

...