v-model语法糖

看文档!看文档!看文档!

每次看文档都有新收获,我好菜啊..这里记一下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)"
    >
  `
})