2022-03-26 Vue 自定义组价的v-model

根据官网文档
一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件

//子组件
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>

这里的 lovingVue 的值将会传入这个名为 checked 的 prop。
同时当 <base-checkbox> 触发一个 change 事件并附带一个新的值的时候，
这个 lovingVue 的 property 将会被更新

！！！注意你仍然需要在组件的 props 选项里声明 checked 这个 prop。

自己测试后备注：
自定义v-model，注意的一点就是使用model属性，同时命名prop和event事件，
重点： model属性中的prop要通过props接收，必须要声明

子组件中，按照自己的逻辑判断来触发event事件，$emit，父组件v-model即可接收到值