子视图组件将道具传递给Vue中的父布局

Question

TL;DR：是否可以将内容从子组件传递到父组件中引用的组件的特定插槽？

我正在使用Vue Webpack Template 附带的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>

导航组件是这样的：

<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/>？

I've put together a more indepth code example to show what I'm after which you can view here.

非常感谢任何帮助。

Answer 1

AFAIK 只能将插槽内容从父级传递给子级。

也许您可以使用PortalVue 获得类似的东西，它可以在定义组件之外渲染DOM，并使用一些v-if 来禁用默认部分的渲染。

但对于我的口味来说，这似乎是一个过度设计的解决方案。有时最好打破 DRY 原则（不要重复自己）并从每个页面中调用 Nav 组件，并在必要时进行更改，或者简单地为具有不同导航的少数视图创建一个完全不同的页面，例如 @987654325 @, /logout, ... 并在顶层使用 dynamic components 和 v-bind:is 来选择要呈现的视图组件（因此，所有常规页面都有一个通用 App 组件，使用常规 Nav 组件，并且一个（或多个根据需要）使用不同 LoginLogoutNav 的备用 LoginLogoutApp 组件。