Vue--EventHub

EventHub

• EventHub 是一个非常重要且常用的东西，在不相关组件通信方面有着很强大的作用。

eventHub是什么？

• eventHub以我理解，他有点像vuex，但是又是缩小版的，可以说是乞丐版，因为他所操作的东西并不多。
• 但是作为组件之间的通信已经足够了，因为你用vuex不得不引用vuex，而且你还需要做不少的配置，在大型或者中型项目处理起来十分方便。
• 但是一两个组件之间传递数据，或者组件比较少且不相关的情况下还要这样操作，需要使用EventHub

eventHub功能

• EventHub 的主要功能就两个： 监听和广播，当然还有去掉监听器。而 Vue 刚好给我们提供了这些功能，我们可以使用 Vue 来描述这些功能

let eventHub = new Vue()

// 监听
eventHub.$on('eventName', (data) => {
    console.log('Trigger this event and receive ' + data)
})

// 广播
eventHub.$emit('eventName', data)

// 去掉监听
eventHub.$off('eventName')

eventHub使用

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

import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false

//全局事件对象，跨页面通信调用，适合一两个组件之间传递数据 
Vue.prototype.$eventHub = Vue.prototype.$eventHub || new Vue()

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

组件部分

• 主页面（传递数据的页面）:HelloWorld.vue

<template>
  <div class="hello">
    <button @click='send'>发送数据</button>
    <SZR></SZR>
  </div>
</template>

<script>
import SZR from "@/components/SZR"
export default {
  name: 'HelloWorld',
  components:{
    SZR
  },
  data () {
    return {
      SZR: '发送数据',
    }
  },
  methods:{
    send(){
      //向子组件传递数据
      this.$eventHub.$emit("SZR", this.SZR)
    }
  }
}
</script>

<style scoped>

</style>

• 接收数据的页面（子页面）: SZR.vue

<template>
  <div class="SZR">
      <p>{{kk}}</p>
      <button @click='openEventHub'>开启监听</button>
      <button @click='offEventHub'>关闭监听</button>
      <button @click='clear'>清空数据</button>
  </div>
</template>

<script>
export default {
  name: 'SZR',
  data () {
    return {
      kk:''
    }
  },
  created(){
      
  },
  methods:{
      change(kk){
         this.kk=kk
      },
      openEventHub(){
        //接收父组件传递过来的数据, 开启监听
        this.$eventHub.$on("SZR", this.change);
      },
      offEventHub(){
          //关闭监听
          this.$eventHub.$off("SZR");
      },
      clear(){
          this.kk=''
      }
  }
}
</script>


<style scoped>

</style>