自定义组件中的model

最近开发一个项目关于表单的组件，用到了自定义组件

• 看到同事写了个自定义组件很感兴趣，就去借鉴一下，发现子传父中有个

    handleChange(){
      this.$emit('change',this.rows);
    }

很好奇没有找到父组件中定义的change，并且发现自定义组件中有一个

export default {
  name:'ListInput',
  model:{
    prop:'list',
    event:'change'
  },
 .........//下面的prop不码了

搜索了vue=文档才发现是为了避免冲突才这样设置的

自定义组件的 v-model

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

现在在这个组件上使用 v-model 的时候：

<base-checkbox v-model="lovingVue"></base-checkbox>

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

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

ok，学到了