vue中不使用v-model进行父子组件双向数据绑定

v-model数据绑定原理：v-model封装了v-bind和v-on两个指令，当值改变时首先通过v-on触发事件并改变组件的值，然后使用v-bind将输入框的值保存起来。在高版本的vue【测试为2.6+】中，不需要使用v-bind属性来保存值。

 

样例说明：

父组件data中的num1、num2绑定给了子组件，在子组件的输入框中改变子组件值，同时会利用输入框的input事件改变子组件data中的值，然后同过$emit触发父组件事件改变num1、num2。值1与值2是1:10的关系。

 

示例

 

代码：

<div id="app">
    <h2>num1: {
  {num1}}</h2>
    <h2>num2: {
  {num2}}</h2>
    <hr>

    <cpn :sub_pro_num1="num1"
         :sub_pro_num2="num2"
         @modify_num1 = "modify_num