Question

在Vuejs中，我有一个父组件（P）和两个子组件（C1和C2）。父对象具有与两个子组件共享的对象。

组件C1显示对象（在表中），组件C2允许用户修改共享对象的属性。因为对象是作为对象共享的，所以我直接在C2中更新它们的属性，并且更改显示在C1中。

问题是C1负责保存更改（通过对服务器进行ajax调用）。如果用户直接在C1中修改属性，则会触发change事件，并且事件处理程序会进行调用。但是，如果在C2中更新属性，则不会在C1中触发更改事件，因此更改不会保留。

所以，问题是，如何基于C2中的事件在C1中触发更改事件？我有一个事件总线（在根元素中）。我可能（也许）使用事件监听器来获取元素（例如使用jQuery），然后触发事件，但显然这不是最优雅的方法。什么是Vue方式？

Answer 1

我希望我能正确理解你：你在两个孩子之间共享一个对象而你正在直接操纵这两个子组件中的那个对象？

这种模式本身就是问题所在。您不希望操纵子组件内的状态。保持反应性的干净方式是通过从父级到两个子组件的prop来绑定对象。孩子们永远不应该操纵prop对象的状态（如果你这样做，vue实际上应该发出警告），他们应该只发出一个他们想要通过使用以下内容来改变对象的事件：

this.$emit('input', newObject)

现在只需在父级中侦听该事件并在那里操纵对象，或者为简单起见，您还可以使用here所述的v模型模式。

<c1 @input="myUpdateFunction" />

或使用v-model模式

<c1 v-model="mySharedObject" />

就是这样。如果您的其他组件也具有与支柱绑定的相同对象，它将自动更新其模板。

如果您想要一种更优雅的方式来共享整个应用程序的状态，我建议使用Vuex。

Answer 2

你的问题不太清楚。但是你可以使用eventBus，它会正常工作。

我的建议是使用vuex。

您可以操作商店属性，只要属性发生变化，更改就会被激活并应用于所有组件。

因此，如果您有两个组件c1和c2，并且在商店中您有一个属性name: 'John Doe'。

如果在c1组件中，您更改了名称：this.$store.state.name = 'Jane Doe'，此更改也会对组件c2生效。

当然不是那么简单。在vuex商店中，您应该state，getters，mutation，actions并在您的组件上使用计算属性来使用通过getter获取商店属性。