VueJS从父级访问子级组件的数据

Daniel Brown 发表于常见问题

丹尼尔·布朗

我正在将vue-cli支架用于Webpack

我的Vue组件结构/层次结构当前如下所示：

应用程式
- PDF模板
  - 背景
  - 动态模板图片
  - 静态模板图片
  - 降价促销

在应用程序级别，我想要一个vuejs组件方法，该方法可以将所有子组件的数据聚合到一个可以发送到服务器的JSON对象中。

有没有办法访问子组件的数据？具体来说，多层深？

如果不是，传递可观察的数据/参数的最佳实践是什么，以便在被子组件修改后可以访问新值？我试图避免组件之间的硬依赖性，因此，到目前为止，使用组件属性传递的唯一内容是初始化值。

更新：

可靠的答案。查看两个答案后，我发现有帮助的资源：

Belmin Bedak

对于这种结构，最好拥有某种商店。

VueJS为此提供了解决方案，称为Vuex。如果您不准备使用Vuex，则可以创建自己的简单商店。

让我们尝试一下

MarkdownStore.js

export default {

 data: {
   items: []
 },

 // Methods that you need, for e.g fetching data from server etc.

 fetchData() {
   // fetch logic
 }

}

现在您可以在任何地方使用这些数据，并导入此Store文件

HomeView.vue

import MarkdownStore from '../stores/MarkdownStore'

export default {

 data() {
   sharedItems: MarkdownStore.data
 },

 created() {
   MarkdownStore.fetchData()
 }

}

这就是您可以使用的基本流程，如果您不想使用Vuex。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。