vue中關於v-model和:model的理解

vue中關於v-model和:model的理解

v-model通常用於input的雙向數據綁定 <input v-model=``"parentMsg"``>，也可以實現子組件到父組件數據的雙向數據綁定

　　:model是v-bind:model的縮寫``<child :model=``"msg"``></child>這種只是將父組件的數據傳遞到了子組件，並沒有實現子組件和父組件數據的雙向綁定。
　　引用類型除外，子組件改變引用類型的數據的話，父組件也會改變的。

​ 根據我目前的理解來看，v-model可以說是一個語法糖，vue的使用過程中，無論是使用element組件(目前只使用了element組件)。自定義的組件只是組件的一種，不會逃離組件的范圍。官方組件可以說是官方自定義的組件。在官方組件中常見的一些寫法，在使用自己定義的組件時也可以參考。對於上述文字的理解中，如果結合父子組件之間相互傳值來看，v-model和:model的影響很大，這個知識點最大的應用也就體現在父子組件值相互綁定上。

v-model語法糖 v-model其實是一種簡寫方式，我們常見的有兩種v-model，分別是input元素上的v-model 和非input元素上。

input上的v-model:

<input v-model="price"><!-- 下行注釋的語法糖 -->
 <!-- <input :value="price" @input="price = $event.target.value"> --> // $event.target.value 就是把input的值賦值給 price

對於非input元素呢，這里使用官方的例子

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

父組件

<base-checkbox v-model="lovingVue"></base-checkbox>

這里的 lovingVue 的值將會傳入這個名為 checked 的 prop。同時當 <base-checkbox> 觸發一個 change 事件並附帶一個新的值的時候，這個 lovingVue 的屬性將會被更新。

這里的change 可以是 input(input元素) click(dialog) 等等事件，具體要看是如何出發元素的狀態改變, 注意.self 防止其他因素影響

對於非input元素類型上面的官方例子，實際上可以看作一個父子組件值綁定的一種。

對於這里進行更深入的解讀，需要在以后父子組件值綁定的博客里進行解讀