Events 使用全局eventbus从子组件向（大）父组件发出Vue.js事件

我想使用全局事件总线将事件从一个子事件发送到一个（主）父事件

在mymain.js:中，我为所有组件提供了一个全局事件总线

import Vue from 'vue'
import App from './App'
const eventHub = new Vue()

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

Vue.mixin({
  data: function () {
    return {
      eventHub: eventHub
    }
  }
})

从“Vue”导入Vue
从“./App”导入应用程序
const eventHub=new Vue（）
新Vue({
el:“#应用程序”，
模板：“”，
组件：{App}
})
米辛({
数据：函数（）{
返回{
eventHub:eventHub
}
}
})

然后，在myChildcomponent.vue:中，我通过单击事件向eventbus发出一个事件

<template>
  <button @click="save">Save</button>
</template>

<script>
  let data = {
    columnName: '',
    order: 0
  }

  export default {
    ...
    name: 'init-column',
    methods: {
      save: function () {
        this.eventHub.$emit('newColumn', data)
      }
    }
    ...
  }
</script>

拯救
让数据={
列名称：“”，
订单：0
}
导出默认值{
...
名称：“初始化列”，
方法：{
保存：函数（）{
this.eventHub.$emit（'newColumn'，data）
}
}
...
}

然后，在一个Parentcomponent.vue中，我想捕捉这个事件，并对孩子传输的数据做一些处理：

<template>
  <div id="app">
      <column v-for="column in allData"></column>
      <init-column v-if="newColumn"></init-column>
    </div>
  </div>
</template>

<script>
  import initColumn from './components/Init-column'

  let newColumn = false

  export default {
    ...
    name: 'project',
    ready: function () {
      this.eventHub.$on('newColumn', (event) => {
        console.log(event)
      })
    }
    ...
  }
</script>

从“./components/Init column”导入initColumn
设newColumn=false
导出默认值{
...
名称：'项目'，
就绪：函数（）{
this.eventHub.$on（'newColumn'，（event）=>{
console.log（事件）
})
}
...
}

---

我不确定将

$放在

侦听器的何处，我看到了一些示例，其中他们将

$放在了ready钩子中。上面的代码不起任何作用，但是我在控制台中没有收到任何错误。
您可以将
$on
侦听器放入已创建的挂钩中，如文档中所述：

您不能在Vue 2.0中使用
ready
hook
ready
hook最初在Vue 1.x中可用，但现在已被弃用。
Vue 3不再具备此功能。下面的RFC提到了动机和一些问题的链接，以获得进一步的帮助



我认为
data
不是事件总线的正确位置。我也绝对不会使用全球混血

我过去所做的是创建一个简单的
bus.js
文件，如：

import Vue from 'vue'
export default new Vue()

然后，在任何需要总线的组件中

import bus from './bus.js'

然后我通常这样做来发出事件

bus.$emit('foo', whatever)

这是为了抓住他们

created () {
  bus.$on('foo', this.someMethod)
}

我更喜欢在created中进行，因为这是生命周期中最早的一步，您可以这样做

另外，github上的这个问题有一些很好的例子：
我通过一个自定义事件获得了想要的效果：
@newColumn=“event”


...
方法：{event:function（e）{console.log（e）}

因此，每当我从子对象中调用
$emit
时，它都会调用事件方法

这工作得很好，但由于某种奇怪的原因，侦听器
$on
没有这样做。可能我缺少
$on
方法。
在创建的钩子中使用时，我得到：
未捕获的TypeError:无法读取未定义的
的属性'$on'，如果是这样，那么您的
This.eventHub
在该组件中未定义最好的方法是按照@BillCriswell在他的回答中的例子，在
bus.js
中定义了
bus
，并导入到任何需要它的组件中。但是它应该是可用的，对吗？嗯，根据这个。如果我
console.log（这个）
在
$emit
事件中，我可以在vue实例中看到
eventHub
。但是，在
$on
上，我没有看到。我会尽快尝试@BillCriswell-的答案。在该指南中，eventHub被定义为全局变量，而不是组件的一部分。同样，在您的情况下，eventHub仅在main.js中可用，而不在组件f中可用iles。您还应该能够找到使用此类事件支持的组件中是否有此功能。我从官方获得了mixin方法。我是vue.js的初学者。除了发出事件之外，您还可以如何从孩子那里向上传输数据？我将检查您的github链接。通常建议使用Vuex，但对于一个较小的项目，可能有点过分。是的，这就是我试图避免的。这是一个相对简单的项目。我正试图保持这种方式。感谢Eden，对此类事件的支持已被删除。我将在回答的顶部提到这一点。将事件中心放在自己的文件中，导出它，然后导入其他文件以使用sam或者您可以对所有事件发射/发射使用此.root
<init-column @newColumn="event" v-if="newColumn"></init-column>
...
methods: { event: function(e) { console.log(e) }