探索vue父子组件实现数据双向绑定失败的原因

有很多时候你会希望在子组件发生的数据变化也映射到父组件，也就是父组件不进行其他操作，数据也能随着子组件的操作而做出相应变化，举个列子说明一下导致这个双向绑定失败的原因

父组件部分：

<template>
    <div>
      <mytest v-model="arr1"></mytest>
    </div>
<template/>
<script>
    export default {
        data () {
            return {
                arr1: []
            }
        }
    }
</script>

子组件部分：

<template>
    <div>
      <div v-for="i in arr">{{i}}</div>
    </div>
<template/>
<script>
    export default {
        props: ['value'],
        data () {
            return {
                arr: this.value
            }
        }
    }
</script>

正常操作子组件中arr这个数组是不会破坏父子组件数据的双向绑定的，arr变了，父组件中arr1也会跟着变化，

但是某种情况下，你进行了 类似arr = [] 这个操作 或者 把其他数组直接赋值给arr这个数组的时候，这个父子组件的双向绑定，就被打破了，当arr发生变化时，arr1不在跟着改变，不信的话你可以敲个小demo试一下，是什么原因导致双向绑定失败了呢？

        原来在父组件给子组件传值的时候，是把这个值的变量地址段传给子组件，子组件再根据这个地址段读取存放在其中的值，而当你进行类似arr = [] 这个操作 或者 把其他数组直接赋值给arr这个数组而不是只操作arr数组本身的时候，存放arr变量的地址段已不再是原来存放arr1的地址段了，所以这个时候你再操作arr数组的时候已不能再影响arr1数组的值。

       所以为了不破坏父子组件数据的双向绑定，我们应该避免直接对数组进行赋值操作，而是以pop(),splice(),shift(),unshift()等直接操作数组本身的方法来替代。当然你父子组件双向绑定的数据不是对象或者数组时，是不会有这种情况的。觉得有用的话，给个赞，留个评论咯，哪里解释的不够明白的，也可以留言！！