前情提要

在学习vue官方文档的过程中，发现了这样一段话：

注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。       

针对这一段话，写了一个小例子，发现了一个小问题，下面详细展开了讲

例子

父组件代码：

```

parent value:

      <span v-for="(value,index) inarraTest" v-bind:key="index">{{value}}

      <ChildTest :arraTest="arraTest">

  import ChildTestfrom './ChildTest'

  export default {

name:'ParentTest',

    data () {

return {

arraTest: ['A', 'B', 'C', 'D', 'E']

}

},

    components: {

ChildTest

}

}

</script>

```

子组件代码：

```

 child value:

      <span v-for="(value,index) inchildData" v-bind:key="index">{{value}}

        <el-button type="primary" plain @click="change">change

  export default {

name:'ChildTest',

    data () {

return {

childData: []

}

},

    props: ['arraTest'],

    methods: {

change:function () {

// this.$set(this.arraTest, 0, 'W')

        this.$set(this.childData, 0, 'W')

}

},

    created () {

this.childData =this.arraTest

}

}

</script>

```

这个发现在子组件里面无论是修改this.childData 还是this.arraTest的值，在父页面的this.arraTest都会同步修改