Vue父子组件之间的通信方式

在Vue2.X中，父子组件之间有两点非常重要的通信原则：

• 父子组件是单向数据流，父组件的状态更新，子组件中prop的状态也会更新，但是子组件的状态变化不会影响父组件。在子组件中修改prop的状态，会在console中报错。关于单向数据流，Vue文档中是这样来描述原因的：

  这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。

  有一点应该注意，如果父组件传递给子组件的状态是对象或者数组，因为两者是按引用传值，所以在子组件中是可以改变对象和数组中的值的，同时也会影响到父组件的状态。

• 每次父组件状态更新时，父组件的所有双向绑定的model都会进行更新；同时，子组件的所有 prop 也会进行更新。这里要注意，父组件中更新的状态，必须在父组件中进行了双向绑定，或者传递到了子组件，才会触发父组件的其他状态的更新。

如果希望在子组件中改变父组件的状态，有两种方式：

• 其一是通过事件派发，父组件响应子组件派发的事件，由父组件自己改变自己的状态
• 其二是父组件向子组件传递数组或者对象，在子组件中改变数组或者对象的状态

因为Vue的双向数据绑定是基于Object.defineProperty()来劫持属性的setter和getter方法，由于js的限制，如果某一个组件的状态是一个数组，对数组的修改无法通过Object.defineProperty()劫持到，所以无法把状态的更新反馈到视图上。举一个例子，下面是一个Vue单文件组件，当我点击按钮的时候，视图无法更新。

所以Vue提供了操作数组的方法来解决这个问题：

Vue.set(array, pos, newVal);

但是在很多实际的case中，即使没有用Vue.set这个方法来操作数组，我们发现数组的变化依然反馈到了视图上，这是什么原因呢？这里就要提到刚才说到的一点，如果当前组件的某一个状态发生更新，Vue会强制自动刷新其他绑定的状态，也就是说组件状态反馈到视图上的这个操作是Vue自动执行的，而不再是通过Object.defineProperty()来劫持的。拿刚才的例子修改一下：

因为修改了组件的状态day，所以Vue将msg这个数组的更新也反馈到了视图上。