前情提要
在学习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都会同步修改
