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

如果您希望每个输入具有不同的值，则有两种选择：

为每个组件设置两个道具，而不是一个，并将每个道具分配给一个输入。
为每个组件使用一个输入（带有一个道具），并使用不同的组件获取不同的输入。

第一个实现：

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>

Vue.js-如何在组件中具有多个输入

1 个答案: