Vue：Avoid mutating a prop directly since the value will be overwritten whenever the parent..报错

Vue框架的：Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or goupuitied property based on theprop’s value.Prop being mutated:"number1"报错

我们想要在Vue框架中实现一个父子通信中的双向绑定，
这是出现错误的源码：

<div id="app"><!-- 假如在标签中不需要写东西，那么可以写成单标签<cpnn /> --><cpnn :number1=num1 :number2=num2 /></div><script src="vue.js"></script><template id="aaa"><div><!-- 这里打印一下组件的内容，来检查一下是否传入成功 --><h2>{{number1}}</h2><input type="text " v-model="number1"><h2>{{number2}}</h2><input type="text " v-model="number2"></div></template><script>const app = new Vue({el: '#app',data: {num1: 1,num2: 2,},components: {cpnn: {template: '#aaa',//定义了两个变量来接父组件传过来的东为number类型西props: {number1: Number,number2: Number,}}}})</script>

在使用时，虽然可以实现我们在输入框内输入内容，然后实时显示我们输入的内容，但是在控制台我们发现出现了报错，每输入或删除一个数子，就报错一次。

错误描述：

我们在props里面定义的变量只能通过父组件来修改，因为props本身的目的就是要求父组件来传数据，所以这个代码中我们不仅父组件修改了变量值，而且我们又通过input来修改了变量值，这是VUE不允许的，这样变量值就会变得很混乱。他建议让我们用data或者computed来代替。

修改方法：

<div id="app"><!-- 假如在标签中不需要写东西，那么可以写成单标签<cpnn /> --><cpnn :number1=num1 :number2=num2 /></div><script src="vue.js"></script><template id="aaa"><div><!-- 这里打印一下子组件的内容，来检查一下是否传入成功 --><h2>props：{{number1}}</h2><h2>data1：{{datanumber1}}</h2><input type="text " v-model="datanumber1"><h2>props：{{number2}}</h2><h2>data2：{{datanumber2}}</h2><input type="text " v-model="datanumber2"></div></template><script>const app = new Vue({el: '#app',data: {num1: 1,num2: 2,},components: {cpnn: {template: '#aaa',//定义了两个变量来接父组件传过来的东为number类型西props: {number1: Number,number2: Number,},// 我们再创建一个data，将props里的内容传给data,再让v-model绑定data里的变量data() {return {datanumber1: this.number1,datanumber2: this.number2,}}}}})</script>

这样我们再运行就不会出现报错了：