v-model的真正形态(v-model只是语法糖)

  1. <input type="text" :value="message" @input="message = $event.target.value">

默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。所以当我们在一个自定义组件上使用v-model并不能实现双向绑定，因为自定的组件并没有默认的value和input事件，在使用时，我们需要按照上面那样显式的去声明定义这些东西。这时，model选项就派上用场了，在定义组件的时候，指定prop的值和监听的事件。

  1. Vue.component('my-input',{
  2.   // 通过model指定自定义事件的，双向绑定事件和值
  3.     model: {
  4.       // 与下面props中的变量对应
  5.         prop: 'uname',
  6.         // 随便命名事件，对应下面$emit即可
  7.         event: 'changeXXX'
  8.     },
  9.     props: {
  10.         uname: {
  11.             type: String,
  12.             default: 'tom'
  13.         }
  14.     },
  15.     methods: {
  16.         updateVal(val){
  17.             this.$emit('changeXXX',val)
  18.         }
  19.     }
  20. })
  1. <template>
  2.     <input type="text" :value="uname" @input="updateVal($event.target.value)">
  3. </template>

父组件内使用时，使用v-model就可以啦

  1. // name是父组件中的属性
  2. <my-input v-model="name" value="some value"></my-input>
  3. <p>{{name}}</p>

等价于

  1. <my-input :uname='name' @changeXXX='val => {foo = val}' value='some value'></my-input>