正确的vueJS方式来同步道具和数据

proper vueJS way to sync props with data

本文关键字：数据 同步 vueJS 方式      更新时间：2023-09-26

考虑一个允许显示/编辑博客文章的VueJS应用程序。

  • 点击"编辑博客文章"，会显示一个模态（Vue组件）来编辑当前博客文章（只是一个普通的js对象）
  • 为此，我将当前的博客文章作为prop传递给模态组件
  • Modal组件有几个表单字段，这些字段应该填充博客文章属性
  • 然而，Vue的"方法"是在Modal组件上有一个data对象，该对象充当填充表单字段的模型，反之亦然，当用户更改表单字段时更新

问题：我如何将作为prop传递的博客文章连接到模态组件的data字段，以便：

  • 博客文章填充表单字段
  • 博客文章在更新表单字段时得到更新

Vue实现这一目标的正确方法是什么？

至少有三种方法：

1） 与您所做的一样，通过prop属性连接数据，但要将.sync属性添加到其中。这样，当在表单上修改数据时，它也会自动在组件上进行修改。此解决方案的问题是更新是自动的，因此，如果验证失败，或者用户关闭模态而不保存更改，则无论如何都会保存这些更改。例如：https://jsfiddle.net/Lz3aq64f/

2） 另一种方法是在$dispatch事件保存时获取该事件的模式，该事件包含已保存的信息。blogpost元素应该监听这个事件并采取相应的行动。

关于模态：

this.$dispatch('update-post', this.title, this.author);

在博客上：

this.$on('update-post', function(title, author) {
  this.title = title;
  this.author = author
});

如果博客文章组件和模态组件不在同一层次结构中，事情会变得有点复杂，并且可能需要通用的父元素来充当代理。想想modal元素dispatching的信息，#app元素通过$on捕获它，然后对blogpost元素执行$broadcast。

3） 使用类似vuex的东西作为状态的中央存储库。我不知道你的应用程序有多大，但这将是最干净的方法：http://vuex.vuejs.org/en/index.html

祝你好运！

相关文章：