vue2/vue3 EventBus事件总线(用于组件通信)

余温无痕

已于 2023-04-08 18:01:13 修改

阅读量1.4k

点赞数 2

分类专栏：组件通信 vue vue3 文章标签： javascript vue.js eventBus

于 2023-04-04 17:58:11 首次发布

本文链接：https://blog.csdn.net/u014678583/article/details/129958706

版权

vue 同时被 3 个专栏收录

40 篇文章 3 订阅

订阅专栏

20 篇文章 6 订阅

订阅专栏

组件通信

3 篇文章 0 订阅

订阅专栏

文章介绍了在Vue2中如何通过在main.js中定义$bus进行组件间的通信，而在Vue3中由于移除了$on等事件API，推荐使用mitt库来实现相同功能。提供了在Vue3中使用mitt的示例代码，包括组件A和B之间的通信以及清理监听器的方法。

摘要由CSDN通过智能技术生成

vue2

在main.js中定义一个新的bus对象并且挂载在原型链上，是全新的Vue实例

Vue.prototype.$bus = new Vue()

A组件

methods:{
	clickBtn(){
		this.$bus.$emit('clicks', '传值内容文本')
	}
}

B组件

created(){
	this.$bus.$on('clicks', res=>{
		console.log(res) // 传值内容文本
	})
}

vue3

Vue 3.x 移除了 $on 、 $off 和 $once 这几个事件 API，使得vue3.x不能像2.x一样，不能直接使用EventBus。

vue3 推荐 mitt 和 tiny-emitter，这里使用mitt

// 安装
npm install mitt -S

在assets新建个common文件夹，接着再创建event-bus.js（这个文件命名根据你们的情况来定）

// event-bus.js
 
import mitt from "mitt";
 
const EventBus = mitt()
 
export default EventBus

A组件

<template>
    <span @click="onClick"></span>
</template>
 
<script setup>
import { ref } from "vue"
import EventBus from "@common/event-bus"
 
const onClick = () => {
    EventBus.emit("p-click", '父传子文本信息');
}
</script>

B组件

<template>
    <span>{{ text }}</span>
</template>
 
<script setup>
import { ref,onBeforeUnmount } from "vue"
import EventBus from "@common/event-bus"
 
const text = ref('')
 
// 第一种
EventBus.on('p-click', (val)=>{
  text.value = val 
  console.log('获取的值val','val')
})
 
// 另一种写法
const funs = (xxx) =>{
    console.log('接收的值为',xxx)
}
EventBus.on('p-click',funs)
EventBus.off('p-click',funs)
 
 
onBeforeUnmount(() => {
    // 取消单个监听-第一种
    EventBus.off('p-click')
    
    // 全部取消
    EventBus.all.clear()
})
</script>

扩展：

vue3 常用的组件互相通信(父子、兄弟、爷孙、任意组件)

vue2/vue3 Provide和Inject使用方式