javascript - 输入字段作为更新父数据的组件

Question

我正在尝试制作一组​​重复使用的组件。我要创建的组件是各种表单字段，例如 text、checkbox 等等。

我的父 vue 对象的 data 中有所有数据，并且希望在用户更改这些字段中的值后，这也是一个事实。

我知道如何使用 props 将数据传递给组件，并使用 emits 将它们再次传递回去。但是，我想避免为我添加的每个组件在我的父对象中编写一个新的“方法”。

<div class="vue-parent">
  <vuefield-checkbox :vmodel="someObject.active" label="Some object active" @value-changed="valueChanged"></vuefield-checkbox>
</div>

我的组件是这样的:

Vue.component('vuefield-checkbox',{
    props: ['vmodel', 'label'],
    data(){
        return {
            value: this.vmodel
        }
    },
    template:`<div class="form-field form-field-checkbox">
                <div class="form-group">
                    <label>
                        <input type="checkbox" v-model="value" @change="$emit('value-changed', value)">
                        {{label}}
                    </label>
                </div>
            </div>`
});

我有这个 Vue 对象:

var vueObject= new Vue({
    el: '.vue-parent',
    data:{
        someNumber:0,
        someBoolean:false,
        anotherBoolean: true,
        someObject:{
            name:'My object',
            active:false
        },
        imageAd: {

        }
    },
    methods: {
        valueChange: function (newVal) {
            this.carouselAd.autoOrder = newVal;
        }
    }
});

查看此 jsfiddle 以查看示例:JsFiddle

jsfiddle 是一个使用硬编码方法设置一个特定值的工作示例。我想在我使用该组件的地方内联编写所有内容，或者编写一个通用方法来更新父数据。这可能吗？

• 敏德

Answer 1

您可以在您的组件上使用 v-model。

使用 v-model 时在组件上，它将绑定(bind)到属性 value它将在 input 上更新事件。

HTML

<div class="vue-parent">
  <vuefield-checkbox v-model="someObject.active" label="Some object active"></vuefield-checkbox>

  <p>Parents someObject.active: {{someObject.active}}</p>
</div>

Javascript

Vue.component('vuefield-checkbox',{
    props: ['value', 'label'],
    data(){
        return {
            innerValue: this.value
        }
    },
    template:`<div class="form-field form-field-checkbox">
                <div class="form-group">
                    <label>
                        <input type="checkbox" v-model="innerValue" @change="$emit('input', innerValue)">
                        {{label}}
                    </label>
                </div>
            </div>`
});

var vueObject= new Vue({
    el: '.vue-parent',
    data:{
        someNumber:0,
        someBoolean:false,
        anotherBoolean: true,
        someObject:{
            name:'My object',
            active:false
        },
        imageAd: {

        }
    }
});

fiddle 示例:https://jsfiddle.net/hqb6ufwr/2/