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发挥了作用。

现在，您应该执行以下操作：

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

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">

Answer 2

Vuex可以为您提供帮助，但是，如果您要做的就是以最小的努力将输入文本值返回给父级，则可以在子级中创建一个名为value的prop，然后将其作为v模型传递给父母。

由于您有一个v-for，因此您可以使其遍历列表而不是计数器，然后在每个项目内传递一些道具作为v-model

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

2 个答案: