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

Question

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

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

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

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

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

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

更新:

坚实的答案.查看两个答案后,我发现有用的资源:

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

Answer 1

对于这种结构,拥有某种商店是件好事.

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一起去.

Answer 2

传递可观察数据/参数的最佳做法是什么,以便当子组件修改它时,我可以访问新值？

道具的流动是单向的,儿童不应该直接修改它的道具.

对于复杂的应用程序,vuex是解决方案,但对于简单的情况,vuex是一种过度杀伤力.就像@Belmin所说的那样,由于反应系统,你甚至可以使用普通的JavaScript对象.

另一种解决方案是使用事件 Vue已经实现了EventEmitter接口,孩子可以使用this.$emit('eventName', data)它与其父接口进行通信.

家长会听这样的事件:( @update是简写v-on:update)

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

您可以引用子组件并将其用作 this.$refs.refComponentName.$data

父组件

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

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

Answer 5

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

正如上面所建议的，我使用了 $refs，在我的父母中，我有例如：

在模板中：

<Personal ref="personal" />

脚本 - 父组件

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

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