javascript - 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']

});

ma​​in.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. 为每个组件设置两个 props 而不是一个，并将每个 prop 分配给一个输入。
2. 为每个组件使用一个输入(使用一个 Prop )，并使用不同的组件获得不同的输入。

第一次实现:

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>