看文件!看文件!看文件!

每次看文件都有新收穫,我好菜啊..這裡記一下v-model的語法糖

v-model的原理之類面試的時候基本都已經問爛了,資料劫持加訂閱者模式,get和set什麼的,然而今天看到有人問v-model語法糖居然不知道這玩意是語法糖.

想了一下用v-model的場景,div上你能上一個v-model麼,不可能的,v-model的使用場景裡大部分都是替代了value這個值,然後他在變化的時候又觸發了change事件,

可以認為v-model就是一個涵蓋了value和change的簡寫.在文件中也有相關說明:

change事件作為v-model預設內建的事件你還可以用v-model來進行父子元件的互通.

example:

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

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

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)"
    >
  `
})