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>