从2个或更多相同组件检索数据的正确方法是什么？

Question

晚间。我创建了一个按钮，它添加了一个内部有输入字段的组件。我可能需要按几次该按钮，这样就会出现2-3个输入字段。每当我输入文本时，我想从父组件发送请求，但我不知道如何从已创建的每个子组件中检索数据。这是开始使用vuex的时候（从未使用过它）？

ParentComponent.vue

<template>
    <div>
        <button class="btn btn-success" @click="addStep">Add step</button>
        <div v-for="i in count">
            <recipe-step v-bind:step-number="i"></recipe-step>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                count: 0
            }
        },
        methods: {
            addStep() {
                this.count += 1;
            }
        }
    }
</script>

StepComponent.vue

<template>
    <div>
        <div class="from-group">
            <label for="step-input"></label>
            <input id="step-input" v-model="text" type="text">
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            stepNumber: {
                type: Number,
                required: true
            }
        },
        data() {
            return {
                step: this.stepNumber,
                text: ""
            }
        }
    }
</script>

Answer 1

不，你真的不需要Vuex了。只要您还在处理父子组件通信，您应该没问题。当分布在孔组件层次结构中的组件需要交换信息时，Vuex发挥作用。

现在，你应该做这样的事情：

不要将text存储在子组件中。输入更改时，将自定义事件权限发送到父组件。注意

<input v-model="text">

只是语法糖

<input :value="text" @input="text = $event">

两者都有相同的效果。这是你可以将输入事件发送到父级的方式，如下所示：

<input @input="$emit('input', $event)">

在您的子组件中添加另一个名为value的prop，它应该替换text。

现在你可以在父组件中使用v-model：

<recipe-step v-model="text">

要存储多个值，只需在数据属性中使用数组即可。

<recipe-step v-model="textArray[i]">

Answer 2

Vuex可以为您提供帮助，但是如果您只想以最小的努力将输入文本值返回到父级，则可以在子级中创建名为value的prop，然后将其作为v-model传递给父级。

因为你有一个v-for，你可以让它迭代一个列表而不是一个计数器，然后在每个项目中传递一些prop作为v-model