Vue.js-如何在組件中具有多個輸入

Question

我剛剛開始學習Vue.js，並且試圖從組件中獲取值。 有沒有一種方法可以在我的組件中具有多個輸入字段並獲取組件外部的每個值？

例如，如果我想獲取並更改我的簡單輸入組件中兩個輸入字段的值。 現在它們都具有相同的值，但我想在每個輸入中具有2個不同的值。

我的組件

Vue.component('simple-input', {

    template: `
        <div>
            <input type="text" :value="value" @input="$emit('input', $event.target.value)">
            <input type="text" :value="value" @input="$emit('input', $event.target.value)">
        </div>
    `,

    props: ['value']

});

main.js

new Vue({
    el: '#root',

    data: {
        value1: 'Initial value 1',
        value2: 'Initial value 2',
        value3: 'Initial value 3'
    },

    methods: {
        alertSimpleInput1() {
            alert(this.value1);
            this.value1 = 'new';
        }
    }
});

HTML

<simple-input v-model="value1"></simple-input>
<simple-input v-model="value2"></simple-input>
<simple-input v-model="value3"></simple-input>

<button @click="alertSimpleInput1">Show first input</button>

Answer 1

如果您希望每個輸入具有不同的值，則有兩個選擇：

1. 為每個組件設置兩個道具，而不是一個，並將每個道具分配給一個輸入。
2. 為每個組件使用一個輸入（帶有一個道具），並使用不同的組件獲得不同的輸入。

第一次執行：

 Vue.component('simple-input', { template: ` <div> <input type="text" :value="value1" @input="$emit('input', $event.target.value)"> <input type="text" :value="value2" @input="$emit('input', $event.target.value)"> </div> `, props: ['value1','value2'] }); new Vue({ el: '#root', data: { value11: 'Initial value 11', value12: 'Initial value 12', value21: 'Initial value 21', value22: 'Initial value 22', value31: 'Initial value 31', value32: 'Initial value 32' }, methods: { alertSimpleInput1() { alert(this.value11); this.value11 = 'new'; } } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="root"> <simple-input :value1="value11" :value2="value12"></simple-input> <simple-input :value1="value21" :value2="value22"></simple-input> <simple-input :value1="value31" :value2="value32"></simple-input> <button @click="alertSimpleInput1">Show first input</button> </div>