Javascript Vue.js在父组件和子组件之间动态映射数据

当我试图在父组件和子组件之间正确地映射数据时，我觉得我即将走上一条效率极低的道路

如果我有一个简单的子Vue元素，如下所示

common/InputText.vue

<template>
    <input v-bind:id="name" v-bind:value="value" v-on:input="changed($event, $event.target.value)">
</template>

<script>
    props: ['name', 'value'],
    methods: {
        changed(event, value) { this.$emit('emitChanged', event, value); }
    }
</script>

<input-text name="field01" v-bind:value="field01" @emitChanged="changed"></input-text>
<input-text name="field02" v-bind:value="field02" @emitChanged="changed"></input-text>

<script>
    import inputText from "./common/InputText.vue";
    export default {
        data() {
            return() {
                field01: '',
                field02: ''
            }
        },
        components: {
            input-text: inputText
        },
        changed(event, newValue) {
            console.log(newValue);
        }
    }
</script>

通过将

changed

方法更改为以下内容，我可以使用子级返回的任何数据更新父级数据

changed(event, newValue) {
    console.log(newValue);
    if( event.target.id == 'field01' ) {
        this.field01 = newValue;
    }
    if( event.target.id == 'field02' ) {
        this.field02 = newValue;
    }
}

---

这感觉像是一种黑客行为，如果有很多输入字段，它将变得难以管理。重新更新父数据的正确方法是什么？

这就是为什么

v-model

非常有用的原因，您可以按照以下方式更改代码以解决问题，而无需使用

v-model

。但我建议尝试实现

v-model

方式

道具：['name'，'value']，
方法：{
已更改（事件）{this.$emit（'emitChanged'，event）；}
}

从“/common/inputText.vue”导入inputText；
导出默认值{
数据（）{
返回（）{
字段01:“”，
字段02:“”
}
},
组成部分：{
输入文本：输入文本
},
已更改（事件、字段）{
此[字段]=event.target.value
}
}

这听起来是实施Vuex的最佳时机；）基于流量模式的状态管理框架。我强烈建议您了解它，它将帮助您避免您发现自己在@maxshuty遇到的许多此类兔子洞。请解释为什么解决此问题需要

vuex

problem@ashwinbande我从来没有说过这是一个必要的解决方案。但是，如果您在管理状态时遇到问题，并且没有使用Vuex，那么可能是时候开始研究它了。当然，它可以添加一些额外的样板文件，但一旦你开始将道具向下传递到多层组件，使用Vuex解决了所有这些麻烦，你就可以进入许多兔子洞。除非该应用程序是一个非常简单的应用程序或原型，否则使用Vuex不仅可以帮助OP了解流量模式，还可以帮助OP从一开始就防止此类问题。尽管在这种情况下没有帮助，但听到其他选项总是很好，感谢@maxshutyPardon我的愚蠢，但是

更改的
方法中的
字段
参数从哪里来？
更改了（$event，'field01'）
在
@emitChanged=“changed（$event，'field01'）”
的
输入文本
中。这太神奇了，有可能也包括newValue字段吗？我不熟悉在emit事件中手动包含变量的语法