Vue - 使用 eventBus 在动态组件之间传递数据？

Question

我的“搜索”（父）视图中有 3 个组件； 'SearchForm'、'ResultList'、'DetailPage'。当我收到后端的响应时，我从 SearchForm 切换到 ResultList。

<keep-alive>
  <component v-bind:is="currentComponent"></component>
</keep-alive>

当在我的“SearchForm”中收到响应时，我会将其保存到 searchBus；

searchBus.$emit('searchIssue', response.data);

然后，在我的 ResultList 中，我想再次检索它并显示结果；

  mounted() {
    searchBus.$on(['searchIssue'], (search) => {
      this.table_items = search;
    });
  }

我会显示一个加载动画（也是一个组件），直到响应完全加载并显示 ResultList。

---

由于Vue lifecycle，当所有组件都显示在一个视图中时，一切正常，因为它们在总线更新时已经在监听。

我应该选择其他方法吗？使用v-show 或将响应传递回父级并使用道具再次插入（Idk，如果它可以工作，因为并非所有组件都具有相同的道具）。

有没有办法使用总线？如何解决它，使其成为一个线性层次结构并仍然隐藏不相关的组件？ (SearchForm -> ResultList -> DetailPage)

Answer 1

我应该选择不同的方法吗？

我是时候使用Vuex了

每个 Vuex 应用程序的中心是 store。 “商店”是 基本上是一个保存应用程序状态的容器。那里有两个 使 Vuex 存储与普通全局对象不同的东西：

• Vuex 商店是被动的。当 Vue 组件从中检索状态时，如果商店的状态，它们将反应性且有效地更新 变化。
• 您不能直接改变商店的状态。改变商店状态的唯一方法是显式提交突变。这 确保每个状态变化都留下可追踪的记录，并启用 帮助我们更好地了解我们的应用程序的工具。