vue.js 从父组件访问子组件的数据

发布于11月04日

我用的是vue-cli scaffold for webpack

我的Vue组件 struct /继承权目前如下所示:

App
- PDF模板

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

Is there a way to access child component's data? Specifically, multiple layers deep?

如果没有，传递oberservable数据/参数的最佳实践是什么，这样当子组件修改它时，我就可以访问新的值？我试图避免组件之间的硬依赖，所以现在，使用组件属性传递的唯一内容是初始化值.

UPDATE:

可靠的答案.在回顾了这两个答案后，我发现这些资源很有用:

推荐答案

对于这种 struct ，最好有一些store .

VueJ提供了解决方案，它被称为Vuex.如果您还没有准备好使用Vuex，可以创建自己的简单store .

让我们试试这个

MarkdownStore.js

export default {

 data: {
   items: []
 },

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

 fetchData() {
   // fetch logic
 }

}

现在，通过导入这个存储文件，您可以在任何地方使用这些数据

HomeView.vue

import MarkdownStore from '../stores/MarkdownStore'

export default {

 data() {
   sharedItems: MarkdownStore.data
 },

 created() {
   MarkdownStore.fetchData()
 }

}

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