Vue父子发射函数破坏了v模型绑定

Question

正在修复其他人代码中的错误，因此我试图限制我在这里所做的更改。

好像当我使用$emit功能在子组件和父组件之间运行功能时，v模型绑定在我的组件中丢失。

有一个父组件：

ParentComponent.vue

<template>
    <child-component v-bind:items="this.items"
                     v-on:event_child="this.eventUpdater">
    </child-component>
<template>
<script>
    import ChildComponent from './ChildComponent.vue';
    export default {
        components: {
            'child-component': ChildComponent
        },
        methods: {
            getItemDetails() {
                //...ajax request that loads item details for page.
            },
            eventUpdater: function(id) {
                this.getItemDetails();
            }
        }
    }
</script>

ChildComponent.vue

<template>
    <div v-for="item in items">
        <input v-model="item.itemId">
    </div>
    <button v-on:click="updateItems">update</button>
</template>
<script>
    export default {
        props: ['items'],
        methods: {
            updateItems() {
                //...ajax call that updates items.
                this.emitWhat();
            },
            emitWhat: function () {
                this.$emit('event_child');
            }
        }
    }
</script>

更新了我的初始商品（可以正常更新）之后，我去更新了另一个商品，似乎该商品的v模型不起作用。最初加载后$emit功能是否破坏了v模型绑定？我该如何解决？

Answer 1

您正在使用此：

<child-component v-bind:items="this.items"

但应使用此：

<child-component v-bind:items="items"

已删除this.。

而且我在父组件中也没有找到items作为data属性。