vue.js - subview 组件将 prop 传递给 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 内的插槽组件，来自 View 组件。

例如，在结帐或入职流程中，您希望限制向用户显示的导航选项，并换入其他内容以突出显示他们在旅程中所处的位置。

有没有办法让我做到这一点，而不必移动<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 组件，必要时进行变化，或者简单地为具有不同导航的少数 View 创建一个完全不同的页面，比如 /login, /logout, ... 并在顶层使用 dynamic components与 v-bind:is选择要呈现的 View 组件(因此您有一个用于所有常规页面的通用 App 组件，使用常规 Nav 组件，以及一个(或多个必要时)使用不同 LoginLogoutNav 的备用 LoginLogoutApp 组件)。