vue全局事件总线

93 阅读 0 评论 62 点赞

我是靠谱客的博主称心红酒，最近开发中收集的这篇文章主要介绍vue全局事件总线，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.什么是全局事件总线

全局事件总线并不是Vue的一个API，而是开发者们总结出来的一个巧妙的写法，他的原理是在vue的原型上添加一个属性，而这个属性我们全部的vue以及vue组件都可以检测到，并且修改，从而实现数据的互通

2.为什么要有全局事件总线

假如我们需要复杂的组件之间通信，借助父子组件的prop属性就显得有点无力了，这时候就可以使用消息总线的写法

3.如何使用

在这里插入图片描述
只需要在main.js中添加红框代码即可

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

Vue.config.productionTip = false

new Vue({
    el: '#app',
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.$bus = this
    }
})

4.注意点

VueX也可以共享数据以及事件啊，为什么不用VueX,用这个
首先VueX是相对更加重量级，他更主要的任务是去掌管整个项目中用到的通用数据，重点在于对数据的统一管理。例如用户登录成功后的信息，全局每个地方都要用到，或者像封装起来的Axios请求，全部放在VueX统一调用。而事件总线相对来说很灵活，适用于处理复杂组件之间难以通信的问题。
$bus只能叫这个吗
你喜欢叫什么都可以，约定俗成大家都会叫这个
全局总线，全部人都可以触碰到$bus这个属性，那会不会存在冲突，比如我在 $bus中加了两个a属性，会有问题吗
会的，会被覆盖，所以后面的例子会说明，使用总线有两个注意事项 ①严格规范调用时候，使用的函数名（可以用一个常量文件来声明规范）②在组件销毁的时候，需要清除对应的总线事件，避免干扰
不要过依赖事件总线，如果父子组件通信依然是最好使用Vue的语法，this.$emit，而不要依赖总线 $bus去发送，因为当总线事件太多了，可能会出现名称冲突的问题，不好排查
vue也支持消息的订阅与发布，原理与总线类似，但是需要引入第三方库，写法也十分简单，但是更推荐使用vue自身的消息总线

5.使用

在这里插入图片描述

<template>
  <div>
    我是One组件，我要发射事件给Two
    <button @click="sendMessageToTwo">点我</button>
  </div>
</template>

<script>
export default {
  name: "One",
  data() {
    return {
      name: '测试名字'
    }
  },
  methods: {
    sendMessageToTwo() {
      //利用总线发射出自定义事件：helleTwo
      this.$bus.$emit("helleTwo", this.name)
    }
  },
  beforeDestroy() {
    //切记要在组件销毁的时候，同时销毁总线事件
    this.$bus.$off("helleTwo")
  }
}
</script>

<style scoped>

</style>

<template>
<div>
  我是Two组件，我要接受One的事件
</div>
</template>

<script>
export default {
  name: "Two",
  mounted(){
    this.$bus.$on("helleTwo",data=>{
      //这个data就是1传入的数据
      console.log("我是组件2，我接受到了1的事件",data)
    })
  }
}
</script>

<style scoped>

</style>