Question

我在主要组件中并行渲染了两个组件：

<div id="main">
  <data-component/>
  <filters-component/>
</div>

数据组件处理数据：

export default {
    name: 'data',
    data: {
        someData: {},
    },
    template: "<p v-for="entry in someData">{{ entry }}</p>",
}

过滤器组件呈现一些表单选择，它应该从上面过滤数据：

export default {
    name: 'filters',
    methods: {
        filterChanged: event => { this.$data.someData = event.target.name }
    },
    template: "<select v-on:click="filterChanged"><option value="foo">bar</option></select>",
}

在过滤器组件中，我有一个事件处理程序 - 我想在那里更改data component的数据并使其重新呈现。我不能这样做，因为data-component不是filters-component的父级，所以我不能使用道具来传递变量。

我该如何解决这个问题？

Answer 1

如果您仍然不熟悉vuex并且只构建一个小型应用，则可以尝试使用此https://alligator.io/vuejs/global-event-bus/。但如果你正在构建一个大型应用程序，只需使用vuex。

Answer 2

Vuex和全局事件总线适用于您想在真正遥远的组件之间共享数据的情况，这里只有一个父，两个孩子，所以你可以pass props down, and propagate child changed data with events，模板看起来应该像这个：

<div id="main">
  <data-component v-bind:array="filteredArr"/>
  <filters-component v-on:change="filterChanged"/>
</div>

对于script部分，在filters-component中，您使用新的过滤条件传播change事件，例如this.$emit('change', 'new condition');。在父级中，您filterChanged中有methods来处理新条件并更改data-component的数组。

基于并行组件的状态修改一个组件中的数据

2 个答案: