双向绑定v-model与单向绑定v-bind:value

一、v-model语法糖

vue使用v-model在表单元素上创建双向数据绑定，在官方文档中简单的提到了它的本质只是一个语法糖，在单向数据绑定的基础上，增加了监听用户输入事件并更新数据的功能；

简单点说，如果有这样一段模板：

<input v-model="message" type="text"/>

那么 v-model 的行为，就比较类似：

 <input :value="message" @input="message = $event.target.value" type="text"/>

$event.target.value 就是把input的值赋值给message，当修改输入框中的数据时，data中的message也会跟着变化。

v-model 其实是一个语法糖，它的背后本质上是包含两个操作：

• v-bind绑定一个value属性
• v-on指令给当前元素绑定input事件

效果与下面的代码一样：

//html
<div>
     <input type="text" @input="handleInput" :value="message" />
     <div>{{message}}</div>
     
</div>
 
//js
export default {
  data(){
      return{
       message:'123'
      }
  }, 
  methods:{
    handleInput(e){
      this.message = e.target.value;
    }
  }
}

二、双向绑定与单向绑定的区别

1、v-model

//html
<div>
   <input type="text" v-model="message" />
   <div>{{message}}</div>
</div>
 
//js
export default {
  data(){
      return{
       message:'123'
      }
  }, 
}

 当修改输入框中的数据时，data中的message也会跟着变化，所以上下都是显示的"123456" 

2、v-bind:value

//html
<div>
   <input type="text" v-bind:value="message" />
   <div>{{message}}</div>
</div>
 
//js
export default {
  data(){
      return{
       message:'123'
      }
  }, 
}

 可以看到当修改输入框中的值时，data中的message并没有跟着改变，所以｛｛message｝｝ 中仍然显示的是初始时候的“123”。

小结：

（1）v-model实现了视图和data中数据的双向绑定，二者有一个改变，另一个也会随之改变。

（2）v-bind:value 只是在初始化的时候把data中的数据绑定到input上，修改input的值不会改变data中的数据。

双向绑定实现父子组件传值得案例参考：https://www.cnblogs.com/zwh0910/p/15677118.html