輸入字段作為組件，在父節點上更新數據

Question

我正在嘗試制作一組​​重復使用的組件。 我要創建的組件是各種表單字段，例如text 、 checkbox等。

我在我的父 vue 對象的數據中擁有所有數據，並且希望在用戶更改這些字段中的值之后，這也是一個事實。

我知道如何使用 props 將數據傳遞給組件，並發出以再次將它們傳遞回去。 但是，我想避免在我的父對象中為我添加的每個組件編寫一個新的“方法”。

<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時，它會綁定到屬性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 ://v2.vuejs.org/v2/guide/components.html#Customizing-Component-v-model

默認情況下，組件上的 v-model 使用 value 作為 prop 並將 input 作為 event，但是某些輸入類型（例如復選框和單選按鈕）可能希望將 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>