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

Question

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

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

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

组件的标题和主视图没有父/子关系。 基本的 Vue.js 模板如下所示：

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

Answer 1

我看到了两种方法来做到这一点......

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

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

编辑

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

Answer 2

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

但是，您可以做几件事。

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

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