v-model原理

  從最初學習Vue就知道v-model可以實現雙數據綁定，但它能實現綁定的原理到底是什么呢？通過查看官方文檔和各種博客資料，以下是我的理解。

  根據官方文檔介紹，v-model本質上就是語法糖，即利用v-model綁定數據后，其實就是既綁定了數據，又添加了一個input事件監聽，如下：

 

當在input元素中使用v-model實現雙數據綁定，其實就是在輸入的時候觸發元素的input事件，通過這個語法糖，也能夠實現父子組件數據的雙向綁定，代碼如下：

父組件

子組件

通過v-bind把父組件的數據綁定到了子組件的props屬性中，而在props上默認用value取值，然后通過$emit觸發事件input，因為v-model綁定的事件是input，故在子組件上觸發了父組件的input事件，通過觸發事件來進行傳值，實現了父子組件數據的雙向綁定，相對於直接使用v-bind以及自定義事件代碼量有所減少。

注意：不能同時綁定value和v-model屬性

 

用其他控件時，稍有區別

 

• <select>
• <textarea>
• 組件

 

1、checkbox 復選框：單個選項綁定checked屬性，多個選項綁定value屬性到一個數組，事件為 change ：

2、radio單選按鈕：

3、select選擇框：
（1）只可單選時，綁定選項的value值

 

 

（2）可多選時，綁定value到一個數組

4、在組件上使用v-moel

組件上的 v-model 默認使用名為 value 的 prop 和名為 input 的事件。

組件的input事件通過組件內部輸入框的input事件提交$emit，手動觸發。

所以為了保持組件內input的value和input和組件的保持一致，組件內的 <input> 必須：

•  value 使用作為prop 的value
•  input 綁定到組件的input事件

<custom-input v-model="searchText"></custom-input>
//相當於
<custom-input
  :value="searchText"
  @input="searchText = $event"
></custom-input>

//對應的input
Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      :value="value"
      @input="$emit('input', $event.target.value)"
    >
  `
})

以上是v-model的默認操作，但是像復選框用作單個選項這種使用checked屬性而不是value屬性，可以用實例的model 選項重新定義默認的prop和事件：

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      :checked="checked"
      :change="$emit('change', $event.target.checked)"
    >
  `
})

 

v-model修飾符

 .lazy：默認情況下（沒有指定input的type），觸發input 事件將輸入框的值與數據進行同步，給v-model添加 lazy 修飾符，轉變為使用 change 事件進行同步：

<!-- 在“change”時而非“input”時更新 -->
<input v-model.lazy="msg" >

.number：將用戶的輸入值轉為數值類型，因為即使在 type="number" 時，HTML 輸入元素的值也會是字符串。

.trim：過濾用戶輸入的首尾空白字符

 

引用：https://www.cnblogs.com/attacking-cabbage/p/10260393.html

https://www.cnblogs.com/yaoyao-sun/p/10542612.html