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

目录

vue2

vue3

---

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使用方式