Vue 中的事件总线

有时候两个组件也需要通信（非父子关系）。当然Vue2.0提供了Vuex，但在简单的场景下，可以使用一个空的Vue实例作为中央事件总线。

main.js

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

Vue.config.productionTip = false
//在Vue原型上添加$bus, 并将其添加到Vue实例中
Vue.prototype.$bus=new Vue()

new Vue({
  render: h => h(App),
  router,
}).$mount('#app')

需要监听某事件的组件

<script>
   methods:{
      imageLoad(){
         this.$bus.$emit('itemImageLoad')
      }
    }
</script>

需要通过监听此事件并执行JS操作的组件

<script>
  this.$bus.$on('itemImageLoad',()=>{
      this.$refs.scroll.refresh()
    })
</script>

即

   用 this.$bus.$emit('事件名称'，参数) 提交事件
   用 this.$bus.$on('事件名称',function（参数）{
})接收事件并执行回调函数