Vue组件通信的刁钻需求，理解

需求：子组件通过v-model修改子组件内部的props，并且上面的输入框输入的数字是下面输入框响应式的变成上面输入框的100倍，如果输入的是下面的自然就成了上面的100倍

例子：

 

 

 

 在Vue实例data{}中定义两个变量，变量通过子组件的props接收，刚开始采用v-model控制台报错，让我不要直接修改，要么通过data(){} 要么通过computed修改。所以我通过data(){} 创建两个对应的变量让他们的值等于v-model绑定的值，再用v-mode绑定他们，然后再用自定义事件，将改变的值传给父组件，父组件接收到事件后就利用methods改变它的值，这样 Vue实例的变量，组件接收的变量，组件自定义的变量三个东西串联起来了闭合了。

这里利用v-mode结果控制台报错，Vue不允许这样修改：

 

然后创建两个变量，利用v-model绑定它：

 

通过给input添加事件并用方法传递给父组件：

 

最后用$emit() 像父组件传递事件，并接收后将它的变量修改，从而让子组件的props内的变量发生连锁反应。