修改 props 数据

通常有两种原因：

1. prop 作为初始值传入后，子组件想把它当做局部数据来用
2. prop 作为初始值传入后，由子组件处理成其他数据输出

应对办法是

定义一个局部变量，并用 prop 的值初始化它

但是由于定义的 ownChildMsg 只能接受 forChildMsg 的初始值，当父组件要传递的值变化发生时，ownChildMsg 无法收到更新。

let childNode = {
 template: `
 <div class="child">
 <div>
 <span>子组件数据</span>
 <input v-model="forChildMsg"/>
 </div>
 <p>{{forChildMsg}}</p>
 <p>ownChildMsg : {{ownChildMsg}}</p>
 </div>`,
 props: {
 "for-child-msg": String
 },
 data() {
 return { ownChildMsg: this.forChildMsg };
 }
};

这里我们加了一个<p>用于查看 ownChildMsg 数据是否变化，结果发现只有默认值传递给了 ownChildMsg，父组件改变只会变化到 forChildMsg，不会修改 ownChildMsg。

定义一个计算属性，处理 prop 的值并返回

由于是计算属性，所以只能显示值，不能设置值。我们这里设置的是一旦从父组件修改了 forChildMsg 数据，我们就把 forChildMsg 加上一个字符串"---ownChildMsg"，然后显示在屏幕上。这时是可以每当父组件修改了新数据，都会更新 ownChildMsg 数据的。

let childNode = {
 template: `
 <div class="child">
 <div>
 <span>子组件数据</span>
 <input v-model="forChildMsg"/>
 </div>
 <p>{{forChildMsg}}</p>
 <p>ownChildMsg : {{ownChildMsg}}</p>
 </div>`,
 props: {
 "for-child-msg": String
 },
 computed: {
 ownChildMsg() {
 return this.forChildMsg + "---ownChildMsg";
 }
 }
};

更加妥帖的方式是使用变量存储 prop 的初始值，并用 watch 来观察 prop 值得变化。发生变化时，更新变量的值。

let childNode = {
 template: `
 <div class="child">
 <div>
 <span>子组件数据</span>
 <input v-model="forChildMsg"/>
 </div>
 <p>{{forChildMsg}}</p>
 <p>ownChildMsg : {{ownChildMsg}}</p>
 </div>`,
 props: {
 "for-child-msg": String
 },
 data() {
 return {
 ownChildMsg: this.forChildMsg
 };
 },
 watch: {
 forChildMsg() {
 this.ownChildMsg = this.forChildMsg;
 }
 }
};