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

Question

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

如果我有一个像下面这样的简单子 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>

如果我有一个像下面这样的父 Vue 元素，它将数据绑定到子元素。问题是它似乎只是从父绑定到子，父数据没有更新

Parent.vue

<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 方法更改为以下方法，我可以使用 Child 返回的任何数据来更新 Parent 数据

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

虽然这感觉像是一种 hack，但如果有很多输入字段，它就会变得难以管理。重新更新 Parent 数据的正确方法是什么？

Answer 1

这就是v-model 有用的原因，您可以在不使用v-model 的情况下通过以下方式更改代码来解决您的问题。但我建议尝试实现v-model 方式。

<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) { this.$emit('emitChanged', event); }
    }
</script>

<input-text name="field01" v-bind:value="field01" @emitChanged="changed($event, 'field01')"></input-text>
<input-text name="field02" v-bind:value="field02" @emitChanged="changed($event, 'field02'"></input-text>

<script>
    import inputText from "./common/InputText.vue";
    export default {
        data() {
            return() {
                field01: '',
                field02: ''
            }
        },
        components: {
            input-text: inputText
        },
        changed(event, field) {
            this[field] = event.target.value
        }
    }
</script>