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

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>