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

Posted 2023-02-23

【中文标题】子视图组件将道具传递给Vue中的父布局

【英文标题】：Child view component pass prop to parent layout in Vue

【发布时间】：2018-10-10 14:48:55

【问题描述】：

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.

非常感谢任何帮助。

【参考方案1】：

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

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

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

【讨论】：

是的，你可能是对的。将导航带入每个视图让我有点痛苦，而且我不确定多个视图如何与 Vue Router 一起使用，但它可能是唯一的选择。感谢您的回复。

我认为它也应该与 vue 路由器一起使用，因为您在*** vue 组件（通常在 main.js 中的那个）中实例化路由器，它也指向动态视图组件。所以你仍然只有一个路由器。让我们知道任何问题（也在这里发表评论，以便我得到通知）。如果此回复令人满意，请考虑将其标记为已接受:-)

谢谢马可。我今天把它停了下来，很快就会重新访问。我暂时将您的答案标记为已接受，如果有人进来并提供更好的方法，我可能会切换它，但现在你的答案是最好的:)