Question

我试图制作一组重复使用的组件。我想要创建的组件是各种表单字段，如 text ，复选框等。

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

我知道如何使用props将数据传递给组件，然后发出以再次传递它们。但是我想避免写一个新的＆＃34;方法＆＃34;在我的父对象中为我添加的每个组件。

<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是一个使用硬编码方法设置一个特定值的工作示例。我希望eighter在我使用组件的地方写内联，或者编写一个通用的方法来更新父数据。这可能吗？

民德

Answer 1

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

在组件上使用v-model时，它会绑定到属性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: {

        }
    }
});

示例小提琴：https://jsfiddle.net/hqb6ufwr/2/

Answer 2

作为Gudradain的补充答案 - v-model字段和事件可以自定义：

从这里开始：https://vuejs.org/v2/guide/components.html#Customizing-Component-v-model

默认情况下，组件上的v-model使用value作为prop，输入为事件，但一些输入类型，如复选框和单选按钮可能希望将价值道具用于不同的目的。使用在这种情况下，模型选项可以避免冲突：

Vue.component('my-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean,
    // this allows using the `value` prop for a different purpose
    value: String
  },
  // ...
})


<my-checkbox v-model="foo" value="some value"></my-checkbox>

以上内容相当于：

<my-checkbox
  :checked="foo"
  @change="val => { foo = val }"
  value="some value">
</my-checkbox>

输入字段作为组件，在父级上更新数据

2 个答案: