vue v-model 双向绑定原理

不多说，直接上源代码，一目了然

// transform component v-model info (value and callback) into
// prop and event handler respectively.
function transformModel(options, data: any) {
  const prop = (options.model && options.model.prop) || 'value'
  const event = (options.model && options.model.event) || 'input'
  ;(data.attrs || (data.attrs = {}))[prop] = data.model.value
  const on = data.on || (data.on = {})
  const existing = on[event]
  const callback = data.model.callback
  if (isDef(existing)) {
    if (
      isArray(existing)
        ? existing.indexOf(callback) === -1
        : existing !== callback
    ) {
      on[event] = [callback].concat(existing)
    }
  } else {
    on[event] = callback
  }
}

此外一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突：

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>
``` |