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

Question

我在用vue-cli支架做网页包

我的Vue组件结构/传家宝目前看起来如下：

• 应用程序

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

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

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

更新：

可靠的答案。在回顾了这两个答案后，我发现资源非常有用：

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

Answer 1

传递oberservable数据/参数的最佳实践是什么，这样当它被子组件修改时，我就可以访问新的值？

道具的流动是单向的，孩子不应该直接修改道具。

对于复杂的应用程序，vuex是解决方案，但对于简单的情况，vuex是一种过度杀伤力。正如@Belmin所说，由于反应性系统，您甚至可以使用一个普通的JavaScript对象。

另一个解决方案是使用事件。Vue已经实现了EventEmitter接口，孩子可以使用此接口$emit（'eventName'，data）与其父级通信。

父节点会监听这样的事件：（@date是v-on的简写：date）

<child :value="value" @update="onChildUpdate" />

并更新事件处理程序中的数据：

methods: {
  onChildUpdate (newValue) {
    this.value = newValue
  }
}

下面是Vue中自定义事件的一个简单示例：
http://codepen.io/CodinCat/pen/ZBELjm?editors=1010

这只是父子通信，如果组件需要与其同级通信，那么您将需要Vue中的全局事件总线。js，您可以只使用一个空的Vue实例：

const bus = new Vue()

// In component A
bus.$on('somethingUpdated', data => { ... })

// In component B
bus.$emit('somethingUpdated', newData)

Answer 2

对于这种结构，最好有一些商店。

VueJS提供了解决方案，它被称为Vuex。如果你还没有准备好使用Vuex，你可以创建自己的简单商店。

让我们试试这个

廉价商店。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，这就是你可以使用的基本流程。

Answer 3

在我的子组件中，没有用于发出更改数据的按钮。这是一个有5~10个输入的表单。单击其他组件中的“流程”按钮后，将提交数据。所以，我不能在每个属性发生变化时发射它。

所以，我所做的，

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

e. g.

<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。