Vue.js 2 修改父组件Prop的问题

在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>