头图

「后端小伙伴来学前端了」Vue中利用全局事件总线实现组件之间通信

宁在春

月亮啊月亮

你能照见南边,也能照见北边

照见她,你跟她说一声,就说我想她了。

前言

前一篇文章写了 vue 中利用 Props 实现组件之间的通信,那种方式是最简单也是最基础的组件之间的通信方式。父组件通过 props 向下传数据给子组件,当子组件有事情告诉父组件时会通过$emit事件告诉父组件。对于父子组件,这种传递方式,是较为方便且实用的,但是对于祖孙组件或者兄弟组件,就显得不那么友善了。


在Vue本身的生态中,也有一个独立的Vuex库用来处理组件之间的通讯,但很多时候,咱们并不需要动用类似Vuex这种大杀招,而可以考虑更简单的 Vue 中的事件总线,即EventBus

在这提出一个简单的思考:

一旦当你看到项目中,某段代码或者是要点很多下才能出来的变量,再或者获取到的方式都相同,这个时候你就一定要考虑能不能让代码达到复用,咱们要学会偷懒哈,偷懒才能前进的更快哈.

下面开始今天的正文哈...

一、什么叫全局事件总线

1.1、概念的引入

我们先认清一件事情,所谓的组件之间的交互,就是我们将数据能够做到组件之间能够共享数据。

无论是props、EventBus、Vuex、发布订阅等实现组件交互,本质就是做到数据共享。弄清这一点,对于使用全局事件总线,就简单多了哈。不过今天的文章,主要是先带着大家使用,原理等周末拉。

EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念,就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件,所以组件都可以上下平行地通知其他组件,但也就是太方便所以若使用不慎,就会造成难以维护的灾难,因此才需要更完善的Vuex作为状态管理中心,将通知的概念上升到共享状态层次。

1.2、安装全局事件总线

//想要成为事件总线的条件:
//1、所有的组件对象必须都能看得到这个总线对象,因此我们把这个对象放在了Vue原型
//2、这个事件总线对象必须能调用$on和$emit方法(总线对象必须是Vue的实例化对象或者是组件对象)

确定全局事件总线: 将vm对象作为事件总线挂载到vue的原型对象上

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

Vue.config.productionTip = false
// 关于全局总线的使用说明
// 使用全局总线的时候,更好的应用是在兄弟组件、祖孙组件之间,这些组件他们并不能做到直接通信,这个使用全局事件总线会方便很多
new Vue({
  render: h => h(App),
  // beforeCreate 位于数据挂载之前的生命周期函数
  beforeCreate () {
    // 安装全局事件总线
    Vue.prototype.$bus = this
  }
}).$mount('#app')

1.3、基本使用

小案例:

在App组件内引入一个demo组件,demo组件中有一个按钮,点击可以修改app组件传给子组件的值,并更新视图。

App组件

<template>
    <div class="todo-container">
        //数据的传递,还是用props快哈
      <Demo :msg="msg"></Demo>
  </div>
</template>
<script>
import Demo from './components/Demo'
export default {
  components: {
    Demo
  },
  data () {
    return {
      msg: 'hello,你好'
    }
  },
  methods: {
    updateMsg () {
      this.msg = 'hello,你好丫,我是博主宁在春'
    },
    updateMsg2 (value) {
      this.msg = value
    }
  },
  // 在加载完成后就进行全局总线的绑定
  mounted () {
    // 绑定方法,'updateMsg'是全局事件总线方法名,而后面是回调时需要执行的方法
    this.$bus.$on('updateMsg', this.updateMsg)
    this.$bus.$on('updateMsg2', this.updateMsg2)
  },
  // 养成习惯 在组件销毁的时候,将事件进行解绑
  beforeDestroy () {
    //就是解绑事件,有多种方式,参数为空,直接是让所有方法解绑
    //多个的时候,可以直接放一个数组进去。
    // this.$bus.$off(['updateMsg',....])
    this.$bus.$off('updateMsg')
    this.$bus.$off('updateMsg2')
     // 原理就让我留到下次吧,兄弟们
  }
}
</script>

demo组件

<template>
  <div>
    <h1>{{msg}}</h1>
    <button @click="updateMessage()">点击修改</button>
    <button @click="updateMessage2('你好丫,宁在春')">点击修改</button>
  </div>
</template>
<script>
export default {
  props: {
    msg: String
  },
  methods: {
    updateMessage () {
      // 通过全局事件总线来进行交互,
      //第一个参数是要 回调父组件中的方法名,后面可以跟参数,多个或者对象都可以
      this.$bus.$emit('updateMsg')
    },
    updateMessage2 (value) {
      this.$bus.$emit('updateMsg2', value)
    }
  }
}
</script>

QQ录屏20211116234634

二、全局事件总线和Props实现组件通信的区别

个人使用总结的哈:

props用来实现组件之间通信,更多的方便于父子组件通信。如果是祖孙或者兄弟组件,将会多一层中间层,而且没有任何用处,而且给人的感觉比较繁琐。

全局事件总线的话,将它挂在vm原型上,对于祖孙组件、或者兄弟组件之间通信,非常的方便,不需要中间层。

后语

大家一起加油!!!如若文章中有不足之处,请大家及时指出,在此郑重感谢。

纸上得来终觉浅,绝知此事要躬行。

大家好,我是博主宁在春主页

一名喜欢文艺却踏上编程这条道路的小青年。

希望:我们,待别日相见时,都已有所成

阅读 342

后端小伙伴来学前端了
望别日,与君相见时,君已有所成。 掘金:[链接] CSDN:[链接]

望别日,与君相见时,君已有所成。

7 声望
0 粉丝
0 条评论

望别日,与君相见时,君已有所成。

7 声望
0 粉丝
文章目录
宣传栏