Vue的v-model指令与model选项

# model

• 类型：{ prop?: string, event?: string }

• 详细：
  允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 属性值且把 input 用作 event属性值。

• v-mdoel 语法糖拆分：

  <my-input v-model="foo"></my-input>
  

  Vue.component('my-input', {
  	// model: {
  	//	 prop: 'value',
  	// 	 event: 'input',
  	// },
  	props: {
  		value: String,
  	},
  	template: '<input type="text" :value="value" @input="$emit($event.target.value)"/>',
  })
  

  使用 vue-devtools 查看就会发现无论是否注释model选项，代码效果不变【变量foo动态改变】。

  原因在于给输入框组件设置 v-model 后： 默认情况下，相当于在子组件上绑定了变量 value 和事件 input，如下，子组件的 model 选项默认设置为 { prop: 'value', event: 'input' }：

  <my-input :value="foo" @input="val => { foo = val }"></my-input>
  

  如果想要修改默认情况，比如 v-model 分解后变成下方这样：

  <my-input :foo="foo" @change="val => { foo = val }"></my-input>
  

  这时就需要将子组件 my-input 的 model 设置为如下：

  <my-input v-model="foo"></my-input>
  

  Vue.component('my-input', {
  	 model: {
  	  prop: 'foo',   // 绑定值修改为 foo
  	  event: 'change',  // 事件修改为 change
  	},
  	props: {
  		foo: String,  // 此时父组件传递过来的变量就是 foo
  	},
  	template: '<input type="text" :value="value" @input="$emit($event.target.value)"/>',
  })
  

参考资料

Vue官网