vue实现支持v-model的component

一个组件上的v-model默认会利用名为valueprop和名为input的事件,但是像单选框、复选框等类型的输入控件可能会将valueattribute用于不同的目的。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)"
    >
  `
})

在自定义组件中定义model选项,并指定传输值prop和回调事件event

猜你喜欢

转载自blog.csdn.net/Dax1_/article/details/127999890