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

Question

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

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

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

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

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

Answer 1

我看到有两种方法可以做到这一点......

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

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

编辑

其实还有别的办法。 portal-vue完全允许您想要的......