Vue中子组件通过v-model动态修改父组件中的值

父子通信中的子传父-使用v-model实现双向数据绑定

• 现有需求：通过子组件中的输入框来动态绑定父组件中data中的数据。

  • 代码实现

    • 1. 父组件使用porps来向子组件传值
      2. 子组件通过自己定义的两个属性（number1,number2）来接受父组件的值(num1,num2)
      3. 通过v-model属性将输入框与子组件的number1和number2来进行绑定

  • 结果

    • 上面功能的实现的确没有问题，但思路有问题，而且在一般情况下,vue是不建议通过这种方式来直接修改父组件中的值的。

    • 代码如下:

• 运行截图

反思：这样虽然可以实现子组件向组件传值，但这种方法在vue看来是极为不推荐的。

• 代码改进
  • 代码实现
    • 在上面的基础上，我在子组件中定义两个data属性(dnumber1,dnumber2)，用来保存父组件传过来的值
    • 将input绑定的属性从number1改为dnumber1,number2同理

• 运行截图

反思：这样是不报错了，但是父组件中的值没有被修改呀，看来得使用自定义事件来向父组件传值了！

• 代码改进

  • 自组件使用$emit自定义事件创建一个自定义事件dnumber1change,dnumber2change,并将dnumber1，和dnumber2传递过去。

    • 父组件定义监听函数number1chage,number2change,在这个函数中，将取得的值value传递给父组件data中的值,从而将num1，和num2的值进行修改。

• 运行截图

  ?

总结：v-model的本质

1. < input type="text" v-model="dnumber1">
2. < input type="text" v-bind:value="dnumber1" @input="dnumber1=$event.target.value">

下面的代码等同于上面的代码, 这也就是需求实现的关键