93

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

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

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

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

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

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

更新:

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

4

5 回答 5

78

在我的子组件中,没有按钮可以发出更改的数据。这是一个有 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。

于 2019-01-24T11:28:54.873 回答
57

对于这种结构,有某种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,那么这就是您可以使用的基本流程。

于 2016-11-03T21:16:49.417 回答
33

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

道具的流动是一种方式,孩子不应该直接修改它的道具。

对于复杂的应用程序,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)
于 2016-11-04T03:13:48.750 回答
13

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

父组件

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

 methods: {
  save() {
   let Data = this.$refs.nameOfRef.$data;
 }
},
于 2020-04-09T13:27:19.723 回答
2

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

如上所述,我使用了 $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
  }
}

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

于 2020-09-13T16:04:20.833 回答