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>