温馨提示:本文翻译自stackoverflow.com,查看原文请点击:vue.js - Binding component prop on input and instance variable
vue.js

vue.js - 在输入和实例变量上绑定组件属性

发布于 2020-03-29 12:58:18

在以下示例中,我具有要绑定到组件属性“ 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>

查看更多

查看更多

提问者
Ferenjito
被浏览
98
Troy Kessler 2020-01-31 16:58

如果要将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>