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

Question

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

我正在使用 Vue Webpack Template which comes with 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

据我所知，只能将插槽内容从父级传递给子级。

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

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

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

Child view component pass prop to parent layout in Vue

vue.js

vue-router

vue-component

vuejs2