vue 组件中的 model: 允许自定义组件在使用 v-model 时定制 prop 和 event

282 阅读1分钟

类型:{props?: string, event?: string} 详细:允许一个自定义组件在使用v-model时定制prop和event,默认情况下,一个组件上的v-model会把value用作prop且把input用作event,但是一些输入类型比如单选框和复选框可能想使用value prop来达到不同的目的,使用model选项可以回避这些情况产生的冲突。

Vue.component('my-component', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: {
      type: Number,
      default: 0
    }
  },
  methods: {
      fn(val){
          this.$emit('change', val)
      }
  }
})
<my-component v-model="foo"></my-component>

上述例子等价于

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