Question

我想使用全局事件总线从子节点发送事件到（大）父节点。

在我的main.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
    }
  }
})

然后，在我的 Childcomponent.vue：中，我在点击事件中向事件总线发出一个事件

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

然后，在 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>

我不确定将$on监听器放在何处，我看到了将$on放入准备挂钩的示例。上面的代码什么都不做，但我在控制台中没有出错。

Answer 1

我认为data不是活动总线的正确位置。我绝对不会使用全球mixin。

我过去所做的是有一个简单的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)
}

我更喜欢在创建中创建，因为这是生命周期中最早的一步，你可以做到这一点。

此外，github上的这个问题有一些很好的例子：https://github.com/vuejs/vuejs.org/pull/435

Answer 2

您可以将spark-submit --master yarn-cluster ... > ~/output.txt 2>~/error.txt &侦听器放入文档中指定的创建的挂钩中：https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication

您无法在Vue 2.0中使用$on挂钩。 ready钩子最初在Vue 1.x中可用，但现在已被弃用。

Answer 3

我通过自定义事件获得了预期效果：@newColumn="event"

<init-column @newColumn="event" v-if="newColumn"></init-column>
...
methods: { event: function(e) { console.log(e) }

所以每当我从孩子那里$emit时，它就会调用事件方法。

这很有效，但由于一些奇怪的原因，听众$on没有。也许我错过了使用$on方法的东西。

Vue.js事件使用全局eventbus从子组件发送到（大）父组件

3 个答案: