Vue 计算属性 和 多组件混入使用经验总结

场景：想让一个对象在两个组件A和B中混入，使用共同的方法，然后A组件中改变混入对象的值，B组件的值得到相应的改变，以最少的代码实现对象复用。

问题：对象都能够成功混入到两个组件中，但是A组件改变混入对象的值，B组件中混入对象的值不变。

原因分析：混入到两个组件中的对象是被复制的，不是单例的，即两个组件都拷贝了一份混入对象的副本，两个对象之间的数据域是分开的,改变其中一个，另外一个不受影响。

解决方式：在第二个组件中加监听事件，用于更新混入对象的值，这样两个组件中的被混入对象的值都更新了，此时可以使用公共的计算属性，两个组件中的值都会变化。

代码：

被混入的对象

export const data =  {
  name: 'data',
  data() {
    return {
      data:{
        value1:1,
        value2:2,
      }
    }
  }
}

组件B中写监听事件

//组件通信
created(){
  //全局监听事件（地图上画线）
  Bus.$on("data", (data) => {
    this.data= data;
  });
},

组件A中的数据改变后，调用组件B的监听事件来改变组件B中混入对象的值。

Bus.$emit("data",this.data);

标签：混入,Vue,对象,改变,组件,data,监听,经验总结
来源： https://www.cnblogs.com/spqin/p/15364893.html