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

Question

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

如果我有一个像下面这样的简单的 Child 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 方法更改为以下

，我可以使用子 returns 的任何数据更新父数据

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

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

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>

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

Vue.js Dynamically Mapping Data Between Parent and Child Component

javascript

data-binding

vue.js

vue-component