Vue3中全局事件总线enentBus使用教程
在vue2中我们可以通过全局事件总线来进行任意组件的数据传递,也可以说是发送消息,全局事件总线中需要满足两个条件,其中要包含 e m i t 和 emit和 emit和on,还有就是所有组件中都需要能访问到,我们在Vue的原型对象上增加了一个全局变量, b u s , V u e . p r o t o t y p e . bus,Vue.prototype. bus,Vue.prototype.bus,将Vue对象指向了 b u s ,这样我们就可以通过 bus,这样我们就可以通过 bus,这样我们就可以通过emit和 o n 来进行数据的发送和接收了,但 V u e 3 中删除了 on来进行数据的发送和接收了,但Vue3中删除了 on来进行数据的发送和接收了,但Vue3中删除了on、$off等方法,推荐使用mitt方案
安装
npm install mitt -S
使用
新建一个工具类,eventBus.js
import mitt from "mitt";
const emitter = mitt();
export default emitter;
组件中发送消息
<template>
<button @click="sendMsg">发送消息</button>
</template>
<script>
import emitter from "../utils/eventBus";
export default {
setup() {
const sendMsg = () => {
emitter.emit("sentToSon2", { msg: "你好啊" });
};
return { sendMsg };
},
};
</script>
<style></style>
组件中接收消息
<template>
<p>接收到的消息{{ msg }}</p>
</template>
<script>
import emitter from "../utils/eventBus";
import { ref } from "vue";
export default {
setup() {
let msg = ref('你好,张三');
emitter.on("sentToSon2",(val)=>{
msg.value = val.msg
console.log(msg);
});
return {msg};
},
};
</script>
<style></style>