Javascript Vue2:由于Mixin而激发的重复事件 问题

事件在一个节组件中触发，每个同级组件触发相同的事件

换句话说，如果在customer部分内修改了call对象，那么

syncCall

方法将触发两次。一次是因为客户部分，一次是因为定价部分

---

上下文 调用组件实现了每个部分组件，如下所示

Call.vue（父级）

我所有的孩子™.

CustomerSection.vue

import CallSectionMixin from './mixins/call_section';

export default {
  mixins: [CallSectionMixin]
};

import CallSectionMixin from './mixins/call_section';

export default {
  mixins: [CallSectionMixin]
};

PricingSection.vue

import CallSectionMixin from './mixins/call_section';

export default {
  mixins: [CallSectionMixin]
};

import CallSectionMixin from './mixins/call_section';

export default {
  mixins: [CallSectionMixin]
};

---

这不是因为混入。由于两个子组件使用相同的

call

对象，因此您看到两次事件激发。每当

调用

对象发生更改时，两个组件都会触发

更改

事件

将两个单独的对象传递给子组件，或者在父级观察对

调用

对象的更改

---

而且，看起来您只是在尝试使两个子组件中的

callObject

属性保持同步。Vue的数据绑定已经解决了这一问题。由于两个组件都使用相同的

call

对象，因此其中一个组件中的任何更改都将自动更新到另一个组件中。

我已更新mixin以显示分配

this。$data.call=this.callObject。理论上，每个孩子都应该有自己的对象副本，但这似乎没有帮助。我相信我已经在家长层面上倾听了。在javascript中，当您将一个对象分配给一个变量时，您实际上是在设置一个指向该对象的指针。因此，即使如此，您仍在两个子组件中引用相同的对象。您的解决方案有效。我只是没有检测到它，因为之前的逻辑仍然被缓存。