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

【问题标题】：What is the correct way to retrieve data from 2 or more identical components?从 2 个或更多相同组件中检索数据的正确方法是什么？
【发布时间】：2019-07-10 03:59:00
【问题描述】：

晚上。我创建了一个按钮，该按钮添加了一个内部具有输入字段的组件。我可能需要按几次该按钮，以便出现 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>

【问题讨论】：

标签： vue.js

【解决方案1】：

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

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

【讨论】：

感谢您的回复。将 v-model 从子组件传递给父组件意味着使用 eventbus、emit 还是我没有正确理解？

【解决方案2】：

不，你真的不需要 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]">

【讨论】：