Question

我有一个父子组件 ShowreelApp.vue和Showreel.vue。创建属性时，我会将属性传递给孩子。

    <showreel-component
        v-for="showreel in showreels"
        v-bind="showreel"
        :key="showreel.id"
        @update="update"
        @delete="del"
    ></showreel-component>

然后我用道具在每个儿童showreel中填充一个更新表单。

        <div class="showreel-input">
            <label>Heading</label>
            <input type="text" :value="myHeading" >
        </div>

在子窗体中，我向父组件发出一个update事件，以更新特定的showreels数据。

update(event) {
    this.$emit('update', this.id, this.heading, this.subheading, this.youtubeid);
}

当用户单击子级Showreels组件表单上的更新按钮时，我想将数据发送给父级。但是，我无法将数据绑定到子级的输入字段，因为这会引起有关属性突变的警告，因为我不应该从子级中更新值。

我想到的一个选项是在子级中创建每个值的副本...在创建时将其更新为传入的props，将它们绑定到表单输入...然后使用这些值将这些值传递给我的父级更新时发出。

但是这些似乎对我来说有点令人费解，现在我想我已经走错了路。任何建议，将不胜感激。

Answer 1

从孩子那里摘掉道具通常不是一个很好的习惯，但是如果需要的话，从2.3+版本开始，有一个.sync修饰符。有关更多参考，请参见Sync modifier

另一种解决方案是使用事件发出或VueX。我个人会推荐Vuex，但是如果您的应用程序相对较小，则可以按照您描述的那样同步或发出事件。

Answer 2

我应该提到，每个showreel组件都有其自己的表单字段和更新按钮。

我想出的解决方案是在父级中创建一个“同步”事件，并从子级向其发出

sync(id, property,value){
   var currentShowreel = this.showreels.find(showreel => showreel.id === id);
            currentShowreel[property] = value
},

sync事件在父级中调用一个方法，该方法采用ID属性名和属性值。

通过方法从子元素输入中调用此通用方法

@keyup="sync('heading', $event.target.value)"

这会在孩子中调用一个方法，该方法又会更新父母数据

},sync(property, value){
    this.$emit('sync', this.id, property, value);
}

然后，当用户更新时，我只是向父母发出了更新事件。父级获取特定的showreel项目数据并根据最新值进行更新。它正在工作，但不确定这是否是正确的方法。

如何使用道具从子表单正确更新父组件

2 个答案: