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

【问题标题】：How do I properly update parent component from child form using props如何使用道具从子表单正确更新父组件
【发布时间】：2019-04-20 08:44:06
【问题描述】：

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

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

然后我使用道具在每个子节目中填充更新表单。

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

在子表单中，我向父组件发出更新事件以更新特定的 showreels 数据。

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

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

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

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

【问题讨论】：

标签： forms vue.js components

【解决方案1】：

从孩子那里改变道具通常不是一个很好的做法，但如果你需要它，从 2.3+ 版本开始，有一个 .sync 修饰符。如需更多参考，请参阅Sync modifier

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

【讨论】：

谢谢...看起来 emit 是可行的方法，但感谢您告知我有关 .sync 的信息

【解决方案2】：

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

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

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

同步事件调用父级中的方法，该方法接收 ID 属性名称和属性值。

这个泛型方法是通过一个方法从子元素输入中调用的

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

这会调用子级中的一个方法，该方法会依次更新父级数据

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

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

【讨论】：