Question

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

点击“编辑博客帖子”后，会显示一个模态（Vue组件）来编辑当前的博客帖子（只是一个普通的js-object）。
为此，我将当前的博客文章作为prop传递给模态组件。
Modal组件有两个表单字段，应填充blogpost-attributes。
然而，Vue'方式'是在Modal组件上有一个data对象，作为填充表单字段的模型，反之亦然，当用户更改表单字段时更新。

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

blogpost填充表单字段
更新表单字段时，博客帖子会更新

完成此任务的正确Vue方法是什么？

Answer 1

你有三种（至少）方法：

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
});

如果blogpost组件和模态组件不在同一层次结构中，事情会变得更复杂，并且您可能需要使用公共父元素作为代理。考虑modal元素dispatching信息，#app元素通过$on捕获它，然后$broadcast执行blogpost元素

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

祝你好运！

适当的vueJS方法将道具与数据同步

1 个答案: