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

Question

我正在使用 vue-cli scaffold for webpack

我的 Vue 组件 structure/heirarchy 当前如下所示：

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

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

有没有办法访问子组件的数据？具体是多层深?

如果不是，传递 oberservable data/parameters 的最佳做法是什么，以便在它被子组件修改时我可以访问新值？我正在努力避免组件之间的硬依赖关系，因此截至目前，使用组件属性传递的唯一内容是初始化值。

更新：

可靠的答案。查看这两个答案后我发现有用的资源：

Answer 1

对于这种结构最好有某种Store。

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

让我们试试这个

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。

Answer 2

what is the best practice for passing down oberservable data/parameters, so that when it's modified by child components I have access to the new values?

props 的流程是向下的，child 不应该直接修改它的 props。

对于复杂的应用程序，vuex 是解决方案，但对于简单的情况，vuex 是一种矫枉过正的方法。就像@Belmin 所说的那样，由于反应系统，您甚至可以为此使用普通的 JavaScript object。

另一个解决方案是使用事件。 Vue 已经实现了 EventEmitter 接口，一个 child 可以使用 this.$emit('eventName', data) 与其 parent.

通信

parent 将监听这样的事件：（@update 是 v-on:update 的 shorthand）

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

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

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

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

这只是 parent-child 通信，如果一个组件需要与其兄弟姐妹通信，那么你将需要一个全局事件总线，在 Vue.js 中，你可以只使用一个空的 Vue 实例：

const bus = new Vue()

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

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

Answer 3

在我的子组件中，没有用于发出已更改数据的按钮。这是一个大约有 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。

Answer 4

你可以 meke ref 到子组件并像这样使用它这个.$refs.refComponentName.$data

父组件

<template>
   <section>
      <childComponent ref="nameOfRef" />
   </section>
</template>

 methods: {
  save() {
   let Data = this.$refs.nameOfRef.$data;
 }
},

Answer 5

就我而言，我有一个注册表单，我已将其分解为多个部分。

如上所述，我使用了 $refs，在我的 parent 中，例如：

在模板中：

<Personal ref="personal" />

脚本 - Parent 组件

export default {
  components: {
    Personal,
    Employment
  },
  data() {
    return {
        personal: null,
        education: null
    }
  },
  mounted: function(){
       this.personal = this.$refs.personal.model
       this.education = this.$refs.education.model
  }
}

这很有效，因为数据是反应性的。

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

VueJS access child component's data from parent

vue.js

vue-component

vuex