Javascript Vue.js:EventBus.$接收到的值未传播

我是vue的新手，正在尝试找出构建我的事件总线的最佳方法。我有一个主布局视图（

main.vue

），其中我有一个路由器视图，我正在传递孩子发出的信息，如下所示：

<template>
<layout>
<router-view :updatedlist="mainupdate" />
</layout>
</template>
import { EventBus } from './event-bus.js'
export default {
  data () {
    return {
      mainupdate: []
    }
  },
mounted () {
    EventBus.$on('listupdated', item => {
      this.mainupdate = item
      console.log(item)
    })
  }
}

从“./event bus.js”导入{EventBus}
导出默认值{
数据（）{
返回{
主要更新：[]
}
},
挂载（）{
EventBus.$on（'listupdated'，item=>{
this.mainupdate=项目
console.log（项目）
})
}
}

该结构看起来像：

Main.vue

包含

Hello.vue

，它调用

axios

数据，并将数据馈送到子组件

Barchart.vue

，

Piechart.vue

，以及

Datatable.vue

axios调用

Hello.vue

填充名为

list

的数据属性。然后，我检查

updatedlist

（当某些内容发生变化时，作为路由器道具从

Datatable.vue

传递到

Main.vue

）是否为空，如果为空，则将其设置为

list

我知道

Main.vue

正在发送和接收事件，因为

console.log（item）

显示了数据。但是我的子组件没有得到更新，即使它们使用

updatedlist

作为数据源。（如果我重新加载页面，它们将被更新，但为什么它们不是被动的？）

更新：我想我应该删掉顶级父级

Main.vue

，将我的EventBus$放在

Hello.vue

中，然后在收到它时更改

list

。但这有两件事，两件事都不重要：

在每次页面刷新时，我的控制台日志都会向列表中添加一个日志并输出所有日志。例如，如果我做了3次更改，将有3个日志，4个日志，4个日志，等等。列表将不断增长，直到我重新启动应用程序

我的子组件仍未更新：(

---

更新2:呃。我想我明白他们为什么不更新了，问题在于我的chartsjs组件中的反应性，所以我必须在那里解决（

Barchart.vue

，

Piechart.vue

）。我自己构建的一个简单组件只是为了读取总长度，但它确实得到了更新，因此可以正常工作。不过，这仍然留下了大量重复控制台日志的秘密，有什么想法吗？

我不知道您是否需要坚持当前的结构。对我来说，以下工作非常好

// whereever you bootstrap your vue.js
// e.g.
window.Vue = require('vue');

// add a central event bus
Vue.prototype.$bus = new Vue();

现在，您可以通过使用访问每个组件中的事件总线

this.$bus.$on( ... )

---

如前所述，我不知道您的完整事件总线代码，但这实际上应该可以正常工作

我不知道您是否需要坚持当前的结构。对我来说，下面的工作非常好

// whereever you bootstrap your vue.js
// e.g.
window.Vue = require('vue');

// add a central event bus
Vue.prototype.$bus = new Vue();

现在，您可以通过使用访问每个组件中的事件总线

this.$bus.$on( ... )

---

如前所述，我不知道您的完整事件总线代码，但这实际上应该可以正常工作

听起来您可能有原始问题的答案？要回答您的上次更新，您可能有重复的日志，因为您似乎没有删除事件处理程序。当您向总线添加事件处理程序时，如下所示：

mounted () {
    EventBus.$on('listupdated', item => {
      this.mainupdate = item
      console.log(item)
    })
  }
}

您需要自己删除它。否则，您只是在每次装入组件时添加一个新的处理程序

我建议您将实际的处理程序移动到一个方法中：

methods: {
  onListUpdated(item){
     this.mainupdate = item
     console.log(item)
  }
}

移动代码以将处理程序添加到已创建的：

created() {
    EventBus.$on('listupdated', this.onListUpdate)
  }
}

并添加beforeDestroy处理程序：

beforeDestroy(){
   EventBus.$off("listupdated", this.onListUpdate)
}

---

在向

EventBus

添加事件处理程序的每个组件中执行此操作，听起来您可能已经找到了原始问题的答案？要回答上一次更新，您可能会有重复的日志，因为您似乎没有删除事件处理程序。向这样的总线添加事件处理程序时：

mounted () {
    EventBus.$on('listupdated', item => {
      this.mainupdate = item
      console.log(item)
    })
  }
}

您需要自己删除它。否则，您只是在每次装入组件时添加一个新的处理程序

我建议您将实际的处理程序移动到一个方法中：

methods: {
  onListUpdated(item){
     this.mainupdate = item
     console.log(item)
  }
}

移动代码以将处理程序添加到已创建的：

created() {
    EventBus.$on('listupdated', this.onListUpdate)
  }
}

并添加beforeDestroy处理程序：

beforeDestroy(){
   EventBus.$off("listupdated", this.onListUpdate)
}

---

在向

EventBus

添加事件处理程序的每个组件中都可以这样做，您可以显示实例化事件总线的位置吗？当然，它在

Datatable.vue

文件中的

saveData

方法中。我知道它工作得很好，因为正如我前面所说的

Main.vue

接收它（在控制台中验证）很抱歉，如果我误解了您的意思，我在上面添加了我的导入语句，它来自一个包含两行的文件：

import Vue from'Vue'

和

export const EventBus=new Vue（）

您的子组件看起来像什么？具体来说，它们如何处理

updatedlist

道具？正如您在上面的更新中所看到的，我现在尝试通过在收到事件时简单地更改原始列表属性值来简化（但没有运气），但没有运气：（您可以显示实例化事件总线的位置吗？当然，它在

Datatable.vue

文件中的

saveData

方法中。我知道它工作得很好，因为如上所述

Main.vue

接收它（在控制台中验证）很抱歉，如果我误解了您的意思，我在上面添加了我的导入语句，它来自一个包含两行的文件：

import Vue from'Vue'

和

export const EventBus=new Vue（）

您的子组件看起来像什么？具体来说，它们如何处理

updatedlist

道具？正如您在上面的更新中所看到的，我现在尝试通过在收到事件时简单地更改原始列表属性值来简化（但没有运气），但没有运气：（谢谢，我会给这一个旋转和报告回来，它不会伤害。唉不。我得到完全相同的怪异控制台日志记录（太多次）和缺乏子更新。你将需要发布更多的代码和设置。这很难从我们看到的看出来谢谢，我会给这一个旋转和报告回来，它不会伤害。唉不。我得到了e。）