从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的支柱，它应该取代text。

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

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

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

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

Answer 2

Vuex可以在这方面帮助您，但是，如果您只想以最小的努力将输入的文本值返回给父服务器，您可以在子节点中创建一个名为value的道具，然后将其作为父模型传递给父模型。

因为您有一个v-for，所以可以让它迭代一个列表，而不是一个计数器，然后在每个项目内传递一些作为v-模型的道具。