如何创建用于全局事件处理的 Vue 总线？

Question

我在 Node/Webpack/Vue 路由器环境中使用 Vue 并尝试设置全局事件处理程序或总线。但它不起作用。它显示为未定义。这是我的设置：

main.js:

//Declare event handler
Object.defineProperty(Vue.prototype, '$bus', {
  get () {
    return this.$root.bus
  }
})

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

App.vue

<script>
export default {
  name: 'App'
  created: () => {
    console.log(this.$bus);
  }
}
</script>

console.log 语句 returns undefined，这意味着事件处理程序未以某种方式传递给应用程序。我还尝试了以下语句来声明事件处理程序：

main.js

//Declare event handler
const eventBus = new Vue()
Vue.prototype.$bus = eventBus

但这也不管用。

Answer 1

这是使用箭头函数的问题。虽然 () => {} 语法看起来比 function() {} 好，但有一点不同，箭头函数使用 this 的词法上下文（从它定义的地方，而不是从它定义的地方被调用，在这个实例中你需要什么），这意味着 this 不再是 Vue 实例，所以你不能使用 this.$bus。您可以通过使用 created: function() {... 或简洁（但功能等效）版本 created() {...

将箭头函数替换为常规函数来解决此问题

您可以通过在 es6, arrow functions, lexical scope, this context 上查找文章来了解更多差异。

main.js代码：

import Vue from "vue";
import App from "./App";

Vue.prototype.$bus = new Vue();

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

app.js

中的某处

export default {
  name: "App",
  created() {
    console.log(this.$bus);
  }
};

如何创建用于全局事件处理的 Vue 总线？

How do I create a Vue bus for global event handling?

vue.js

event-handling

vue-router

event-bus