时间戳

首页 > 解决方案 > Vue - 使用 eventBus 在动态组件之间传递数据？

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

问题描述

我的“搜索”（父）视图中有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 生命周期，当所有组件都显示在一个视图中时，一切都在工作，因为它们在总线更新时已经在监听。

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

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

标签： vue.jsvuejs2vue-component

解决方案

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

我是时候使用Vuex 了

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

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

推荐阅读