vue-全局事件总线mitt库（父子通信，兄弟通信都可，兼容vue2、vue3）

最新推荐文章于 2025-09-24 08:20:19 发布

原创最新推荐文章于 2025-09-24 08:20:19 发布 · 1.4k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

builder2991

关注

标签

#vue.js #前端 #javascript

分类前端开发

vue 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用mitt库作为全局事件总线，实现父子组件间和兄弟组件间的通信，支持Vue2和Vue3。通过`emit`发送事件，`on`监听事件并传递数据。

vue-全局事件总线mitt库（父子通信，兄弟通信都可，兼容vue2、vue3）

安装

npm install mitt

封装JS文件，方便调用

import mitt from "mitt"
const $emitter = mitt();
export default $emitter

使用

传值用emit
接收用on

文件A:父组件

<template>
  <div>
    <B></B>
	<C></C>
	A接受到：{{thing}} 
  </div>
</template>
 
<script>
//导入组件以及刚才封装的js文件
import B from "./B.vue";
import C from "./C.vue";
import $emitter from "../../common/eventbus.js"
export default {
  name: "A",
  components: {
    B,
	C
  },
  data(){
    return {
		thing:"",
    }
  },
  mounted(){//要在mounted中接收
  	$emitter.on("thing",(val)=>{
  	//通过on方法接收来自子组件B的值
  		this.thing = val
  	})
  },
  methods:{
  }
};
</script>

文件B:兄弟组件1

<template>
  <div>
	<button @click = "handler">B:点击</button>
  </div>
</template>
 
<script>
import $emitter from "../../common/eventbus.js"
export default {
  name: "B",
  methods:{
	  handler(){
		  $emitter.emit("thing","一个拥抱")
		  //通过emit向外传值
	  }
  }
};
</script>

文件C：兄弟组件2

<template>
  <div>
    <span>C接收到：{{thing}}</span>
  </div>
</template>
 
<script>
	import $emitter from "../../common/eventbus.js"
	export default {
		
	  name: "C",
	  data(){
	    return {
	      thing:""
	    }
	  },
	  mounted(){
		  $emitter.on("thing",(val)=>{
			//通过on方法接收来自兄弟组件B的值
			  this.thing = val
		  })
	  }
	};
</script>

在这里插入图片描述