vuejs组件通信的eventHub(巴士）

eventHub以我理解，他有点像vuex

eventHub是什么？

但是又是缩小版的，可以说是乞丐版，因为他所操作的东西并不多。

但是作为组件之间的通信已经足够了，因为你用vuex不得不引用vuex

而且你还需要做不少的配置，在大型或者中型项目处理起来十分方便。

但是一两个组件之间传递数据，或者组件比较少的情况下还要这样操作，需要一个备用方案。

 

eventHub如何使用？

1.如果你是外部js 引用的话，可以这样写

 

// event-bus.js
// 组件通过它来通信
var eventHub = new Vue()
export default eventHub


// 主页面








// 组件1  
// components名称：Subscriber 







// 点击按钮「发送」 后
// 打印： hello

这里是把他独立成一个js 引用，如果不想每次用的时候都在组件里面定义应该怎么做呢？

 

1.在入口文件里面引用

 

假设你用的是脚手架工具，引用文件名叫 main.js

import Vue from 'vue'
import App from './App'


//  全局组件之间通信
Vue.prototype.$eventHub= Vue.prototype.$eventHub ||  new Vue()        // 巴士

new Vue({
  el: '#app',
  template: '',
  components: {App},
  data: {
    eventHub: new Vue()
  }
})

组件部分：

主页面： HelloWorld.vue

 

引用组件：

 

最终打印：

发送
哈哈
我获取的参数