v-model其实是一个语法糖,默认传递名为value的prop并监听input事件,把触发input事件传过来的值用用来更新v-model绑定的变量。在子组件中用model选项可以更改prop的名字或者event的名字。具体参考下方示例。

<custom-input v-model="msg"></custom-input>
// 因为是语法糖,所以也等同于下面的写法
//<custom-input :myValue="msg" @myEvent="v=>msg=v"/>
export default {
  components: ['custom-input'],
  data() {
    return {
      msg:'init message'
    }
  },
}
<template lang="">
  <div>
      <h3>这是我的组件,可以接受v-model参数</h3>
      <input :value="myValue" @input="$emit('myEvent', $event.target.value)">
  </div>
</template>
<script>
export default {
    props:['myValue'],
    model:{
        prop:'myValue',
        event:'myEvent'
//model不指定的话默认默认是{prop:'value',event:'input'}
    }
};
</script>