在Vue2.X中，父子组件之间有两点非常重要的通信原则：
-
父子组件是单向数据流，父组件的状态更新，子组件中prop的状态也会更新，但是子组件的状态变化不会影响父组件。在子组件中修改prop的状态，会在console中报错。关于单向数据流，Vue文档中是这样来描述原因的：
这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。
有一点应该注意，如果父组件传递给子组件的状态是
对象或者数组，因为两者是按引用传值，所以在子组件中是可以改变对象和数组中的值的，同时也会影响到父组件的状态。 每次父组件状态更新时，父组件的所有双向绑定的model都会进行更新；同时，子组件的所有 prop 也会进行更新。这里要注意，父组件中更新的状态，必须在父组件中进行了双向绑定，或者传递到了子组件，才会触发父组件的其他状态的更新。
如果希望在子组件中改变父组件的状态，有两种方式：
- 其一是通过事件派发，父组件响应子组件派发的事件，由父组件自己改变自己的状态
- 其二是父组件向子组件传递
数组或者对象，在子组件中改变数组或者对象的状态
因为Vue的双向数据绑定是基于Object.defineProperty()来劫持属性的setter和getter方法，由于js的限制，如果某一个组件的状态是一个数组，对数组的修改无法通过Object.defineProperty()劫持到，所以无法把状态的更新反馈到视图上。举一个例子，下面是一个Vue单文件组件，当我点击按钮的时候，视图无法更新。
<template>
<div id="header-ctn">
hello {{msg[0]}}
<button @click="change">点我改变组件状态</button>
</div>
</template>
<script>
export default {
data () {
return {
msg: ['yanbin', 'bluestrings']
}
},
mounted () {
},
methods: {
change () {
this.msg[0] = '闫斌';//应该写成 this.$set(this.msg, 0, "闫斌");
}
}
}
</script>
所以Vue提供了操作数组的方法来解决这个问题：
Vue.set(array, pos, newVal);
但是在很多实际的case中，即使没有用Vue.set这个方法来操作数组，我们发现数组的变化依然反馈到了视图上，这是什么原因呢？这里就要提到刚才说到的一点，如果当前组件的某一个状态发生更新，Vue会强制自动刷新其他绑定的状态，也就是说组件状态反馈到视图上的这个操作是Vue自动执行的，而不再是通过Object.defineProperty()来劫持的。拿刚才的例子修改一下：
<template>
<div id="header-ctn">
hello {{msg[0]}}<br/>
今天{{day}}
<button @click="change">点我改变组件状态</button>
</div>
</template>
<script>
export default {
data () {
return {
msg: ['yanbin', 'bluestrings'],
day: '星期天'
}
},
mounted () {
},
methods: {
change () {
this.msg[0] = '闫斌';
this.day = '星期一';
}
}
}
</script>
<style lang="less">
</style>
因为修改了组件的状态day，所以Vue将msg这个数组的更新也反馈到了视图上。
