方法一： input
示例：输入框
组件
通过this.$emit('input', value)将将用户的之输出到v-model绑定的值
<input v-bind:id="randomId" v-bind:value="value" v-on:input="onInput"/>
export default {
props: {
value: String
},
data: function () {
return {
randomId: 'input-' + Math.random()
}
},
methods: {
onInput: function (event) {
this.$emit('input', event.target.value)
}
}
}
使用
<my-input v-model="msg"/>
方法二： 自定义事件
原理和一是一样的，但是它给人的感觉是数据是双向的。
组件
用户输入时（input）,自定义一个onchange事件，将用户输入的值作为参数传递出去
<input v-bind:id="randomId" v-bind:value="value" v-on:input="onInput"/>
export default {
props: {
msg : String
},
data: function () {
return {
randomId: 'input-' + Math.random()
}
},
methods: {
onInput: function (event) {
this.$emit('onchange', event.target.value)
}
}
}
使用
实现自定义事件，获取子组件传递过来的值
<my-input :msg="msg" @onchange="onchange"/>
...
methods: {
onchange (value) {
this.msg = value
}
}
...
详细解释：自定义事件
