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>

你可能感兴趣的:(Vue--EventHub)