问题

父组件向子组件传对象，在子组件中向这个对象添加一个新的属性，并将该属性和相应的视图进行绑定，但之后改变该属性的值并没有引起视图的变化，子组件代码如下：

//子组件 test
<template>
  <div>
    <span>{{ obj.msg }}</span>
  </div>
</template>

export default {
  data: function() {
    return {
      obj: Object.assign(this.objProp, {msg: 'hello'})
    };
  },
  props: ['objProp']
};

父组件这样传数据：

//父组件
<test :objProp="obj"></test>
export default {
  data: function() {
    return {obj: {}}
  }
}

可以看到修改该属性并未发生响应式变化：

image.png

原因分析

首先要明确的是父组件的 obj 和子组件的 obj 是同一个对象，这个对象是定义在父组件 data 中的，所以该对象应该由父组件来监听（子组件不监听 obj），然而在父组件定义 obj 的时候并无 msg 这个属性，所以父组件是无法监听到 msg，即 msg 的改变不会引起视图变化。若该对象不定义在 data 中，那么监听权在子组件中。

//父组件
<test :objProp="{}"></test>

或者子组重新创建个新对象，对这个新对象进行监听

//子组件
export default {
  data: function() {
    return {
      obj: Object.assign({}, this.objProp, {msg: 'hello'})
    };
  },
  props: ['objProp']
};

几天后我有了新发现，vue有两种方法添加响应式属性，可以用$set(this.obj, 'flag', true)这个方法来动态添加响应式属性，也可以把原属性和新属性合并到新的对象中this.obj=Object.assign({}, this.obj. {flag: true})