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 或将响应传递回父级，并再次使用prop插入响应（如果不是所有组件都具有相同的props，则返回Idk）。

是否有使用总线的方法？并且如何解决使它成为一个线性层次结构并仍然隐藏不相关的组件？（SearchForm-> ResultList-> DetailPage）

Answer 1

我应该选择其他方法吗？

我将要使用Vuex

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


Vuex存储具有反应性。当Vue组件从中检索状态时，如果商店的状态，它们将作出反应并有效地更新   变化。

您不能直接更改商店的状态。更改商店状态的唯一方法是显式提交突变。这个   确保每个状态更改都留下可跟踪的记录，并启用   帮助我们更好地了解我们的应用程序的工具。

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

1 个答案: