vue.js - 从 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]">