如何在 Vue Router 中的命名视图之间传递数据和事件？

Question

我有这样的布局：

.------------------------+----------------.
|  Current Tab Title     |      Controls  |
+------------------------+----------------+
|  Tab1 Tab2 [Tab3]                       |
+-----------------------------------------+
|  Main Content                           |
|                                         |
'-----------------------------------------'

“控件”字段内容在逻辑上应该属于当前选项卡。但是我不能把它放在同一个 Vue 组件中，因为它应该在应用程序模板的不同位置呈现。 此外，标签标题应取决于当前选择的标签。

我制作了 Tab1 等 <router-link> 组件。 对于Current Tab Title，我滥用了$route.name field。 我可以使用named views 来显示Controls。

但我不明白如何在 Controls 块中设置一些控件，这些控件将依赖并影响当前选项卡中的状态。

例如，对于Tab1，我们希望显示一个复选框，该复选框会影响标签的某些行为。所以它的状态应该存储在Tab1 组件中，而不是Tab1Controls 组件中。但是我怎样才能连接它们，即将checkbox 的当前值从Tab1 instance 传递给Tab1Controls 实例，并将一个事件从Tab1Controls 实例传回Tab1 实例？

这显然可以用Vuex 解决，但我想避免它。

一般建议是将状态向上移动，但我认为路由器不可能。无论如何，这会让事情变得一团糟，因为checkbox 数据应该属于Tab1 或Tab1Controls，并且与其他标签无关。

Answer 1

这是我想到的一种方法。它远非理想，但至少它有效并且允许我保持它应该属于的状态。

首先，我创建了一个BaseTemplate 组件，其中包含应用程序的大部分标记。 IE。 App 组件只保留最低限度，大部分主体（包括不可变部分）都移动到 BaseTemplate：

// BaseTemplate.vue
<template>
<div>
  <header>
    <slot name="title">{{ title }}</slot>
    <slot name="controls"/>
  </header>
  <nav>
    <router-link ...>
    <router-link ...>
  </nav>
  <main>
    <slot/>
  </main>
</div>
</template>

<script>
export default {
  props: ['title'],
};
</script>

// Tab1.vue
<template>
  <BaseTemplate title="First Tab">
    <template #controls>
      ...
    </template>

    main content goes here...
  </BaseTemplate>
</template>
...

这样，所有与 Tab1 相关的 props 都属于 Tab1 组件，同时公共标记移动到单独的组件中。

现在来说缺点。 与通用控件/导航位于路由视图之外的“正常”设置不同，在此设置中，它们实际上是每个选项卡的不同组件实例。所以他们在切换时会闪烁。 不确定是否可以通过某种方式缓解。