雙向綁定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