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

在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这个数组的更新也反馈到了视图上。

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

推荐阅读更多精彩内容