使用 $event 或通过 Vue.js 中的 $parent 操作父级数据

Question

我是 Vue.js 的新手，最后我使用 $parent 在父组件上操作了一个数组。我只是想知道这样做是否有危险：

setTitle(title) {
        this.$parent.items[this.index].name = title;
        this.editTitle = false;
}

而不是使用 $emit 发出事件，然后在父级上监听它？

这会在未来以任何方式烧毁我吗？

我想知道，因为我从未见过它像我遇到的任何教程中的第一个解决方案那样显示。

Answer 1

通过 child 操纵 parent 存在一些危险，类似于通过 parent 操纵 child。主要问题往往是责任分离和耦合，如果您重用代码，您需要删除或修改任何操纵系统中另一个 object 的代码。

通过发出事件并让 parent 处理更新的信息，您可以在多个地方重复使用 object 而无需修改，因为 parent 不需要更新它们项目可以忽略该事件。

这也使得维护代码变得更加困难，因为有人可能会看到数组已更新但看不到 parent object 中更新它的代码。在您的示例中并不难找到，但如果您的程序变得更加复杂，则可能需要时间来查找和更新或调试。

Manipulating data on parent with $event or via $parent in Vue.js