在以下示例中,我具有要绑定到组件属性“ abc”的vue实例变量“ formTerms”,该属性本身已绑定到其模板中的输入字段。更改输入的值时,我希望实例“ formTerms”变量获取该值。但是,该代码似乎不起作用。
JS:
Vue.component('terms',{
model: {
prop: 'abc',
event: 'submit',
},
props: ['abc'],
template: '<div><input type="text" name="terms" class="form-control" title="" @change="submit" :value="abc"/></div>',
methods: {
submit: function() {
this.$emit('submit', this.abc);
}
}
});
var vm = new Vue({
el: '#id',
data: {
formTerms: ''
},
});
HTML:
<terms v-model="formTerms"></terms>
如果要将v模型绑定到自定义组件,则必须这样做
Vue.component('terms',{
props: ['value'],
template: '<div><input ref="input" type="text" name="terms" class="form-control" title="" @input="$emit('input', $refs.input.value)" :value="value"/></div>'
});
var vm = new Vue({
el: '#id',
data: {
formTerms: ''
},
});
那么您可以像以前一样在父级中使用组件
<terms v-model="formTerms"></terms>
谢谢,我不了解v-on:input的东西
不幸的是,我在v-on处理程序中收到一个错误:“ TypeError:无法读取未定义的属性'value'”
您是否已将
ref="input"
属性添加到输入元素?