在Vue.js应用程序中使用另一个组件中没有直接关系的组件中的代码（函数/模板）

Question

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

该应用程序具有非常基本的布局：header，main视图和底部的navigation部分。根据用户当前所在的页面，我想在标题中显示main action。请参见以下线框：

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

组件的标题和主视图没有父/子关系。基本的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存储来跟踪标题中的操作项应该是什么。您可以让main组件设置存储值，然后header可以读取它并采取相应措施

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

Answer 2

我看到两种方法来做...

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

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

编辑

实际上还有其他方法。 portal-vue完全允许您想要...。