在vue 2中，子组件的Component是不能随意的对父组件的Prop进行修改的。
如
// Parent.vue
<template>
<child :test="test"></child>
</tempalte>
<script>
import Child from './child'
module.exports = {
components: {Child},
data: function () {
return {
test: 'some string'
}
}
}
</script>
// Child.vue
<template>
<div> {{ test }} </div>
</tempalte>
<script>
import Child from './child'
module.exports = {
props: ['test'],
mounted: function () {
this.test = 'other string' // Vue warning!! 会提醒不要修改父组件的Component!!
}
}
</script>
这样的限制真的很不方便啊，经常把变量传到子组件。
官方给出的方法是使用事件响应机制进行修改，但是这样十分的绕。
折腾几天，发现一个曲线的解决办法：传递对象，需要进行修改的变量属于对象内的一个实例变量：
// Parent.vue
<template>
<child :test="test"></child>
</tempalte>
<script>
import Child from './child'
module.exports = {
components: {Child},
data: function () {
return {
test: {
_: 'some string'
}
}
}
}
</script>
// Child.vue
<template>
<div> {{ test._ }} </div>
</tempalte>
<script>
import Child from './child'
module.exports = {
props: ['test'],
mounted: function () {
this.test._ = 'other string' // OK.可以对传递过来的对象进行修改
}
}
</script>
