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

Question

我正在 为 webpack 使用 vue-cli 脚手架

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

• 应用程序
  • PDF 模板
    • 背景
    • 动态模板图像
    • 静态模板图像
    • 降价

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

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

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

更新：

扎实的答案。在查看了两个答案后，我发现有用的资源：

• Vuex 以及何时使用它
• 适用于小型应用程序的 Vuex 替代解决方案

原文由 Daniel Brown 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

对于这种结构，有某种Store就好了。

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 文件

主视图.vue

 import MarkdownStore from '../stores/MarkdownStore'

export default {

 data() {
   sharedItems: MarkdownStore.data
 },

 created() {
   MarkdownStore.fetchData()
 }

}

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

原文由 Belmin Bedak 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在我的子组件中，没有按钮可以发出更改的数据。这是一个有 5~10 个输入的表格。单击另一个组件中的处理按钮后，数据将被提交。所以，当它发生变化时，我不能发出每个属性。

所以，我所做的，

在我的父组件中，我可以从“ref”访问孩子的数据

例如

<markdown ref="markdowndetails"></markdown>
<app-button @submit="process"></app-button>

// js
methods:{
    process: function(){
        // items is defined object inside data()
        var markdowns = this.$refs.markdowndetails.items
    }
}

注意：如果你在整个应用程序中都这样做，我建议改为使用 vuex。

原文由 PJ3 发布，翻译遵循 CC BY-SA 4.0 许可协议