vue 自定义组件使用v-model

html

<div id="app">
<my-component v-model="msg"></my-component>
msg: {{msg}}
<my-counter v-model="num"></my-counter>
num: {{num}}
</div>

js

Vue.component('my-component', {
template: `<div>
<input type="text" :value="currentValue" @input="handleInput"/>
</div>`,
computed:{
currentValue:function () {
return this.value
}
},
props: ['value'], //接收一个 value prop
methods: {
handleInput(event) {
var value = event.target.value;
this.$emit('input', value); //触发 input 事件，并传入新值
}
}
});
new Vue({
el: '#app',
data: {
msg: 'hello world',
num: 0
}
})