在 Vue.js 应用程序中使用代码 (function/template) 从一个组件到另一个组件，没有直接关系

Question

我正在使用 Vue.js 开发应用程序，我遇到了以下挑战：

该应用程序有一个非常基本的布局：一个 header、一个 main 视图和一个 底部的导航 部分。根据用户当前所在的页面，我想在 header 中显示 主要操作 。请参阅以下线框图：

我现在的问题是：有没有办法将"inject"模板和代码放入header？因为理想情况下，我希望在相应的组件中而不是在 header 中具有逻辑和外观（如带标签的图标），因为它不知道当前视图。

header和组件的主视图没有parent/child关系。基本 Vue.js 模板如下所示：

<div class="app-content">
    <TheTopBar/>
    <main>
        <router-view></router-view>
    </main>
    <TheNavigationBar/>
</div>

Answer 1

简短的回答是否定的，您不能将代码从一个组件注入到另一个组件。您必须在 header 组件中包含模板逻辑。

但是，您可以做一些事情。

1. 在 header 组件中，您可以使用 this.$route.path 检查当前路径。并基于此显示操作项。 （如果您使用路由器）
2. 使用 vuex 商店来跟踪 header 中的操作项应该是什么。您可以让 main 组件设置存储值，然后 header 可以读取它并采取相应的行动

我希望这能回答你的问题。

Answer 2

我看到有两种方法...

1. 将 default slot 添加到 TheTopBar 模板中您想要查看操作的位置
2. 从您的顶级组件中删除 TheTopBar 组件，将其放入您的“主视图”组件模板（每个模板）中并在那里定义插槽的内容（操作）

其他方法可能是使用 Vue 路由器的 Named Views，但这需要您为每个相应的“主视图”组件创建单独的“操作”组件

编辑

其实还有别的办法。 portal-vue 完全可以满足您的需求....