![cover](https://img-blog.csdnimg.cn/c7a4d9336f3b47168953b841647d89a3.png)
vue3中事件总线mitt(第三方库mitt)
1.安装mitt:npm install mitt -save。3.发出事件的页面:bb.vue。4.接收事件的页面:dd.vue。
·
1.安装mitt:npm install mitt -save
2. 新建EventBus.js文件:
// 事件总线第三方库:
import mitt from 'mitt';
const bus = mitt();
export default bus;
3.发出事件的页面:bb.vue
<template>
<div class="box">
<h2>小b页面视图</h2>
<button @click="sendData">局部事件总线:点击之后给cc页面传递一个值</button>
</div>
</template>
<script setup>
import bus from "../utils/EventBus"
// import {ref} from "vue"
const sendData = () => {
bus.emit("data",18)
}
</script>
<style>
.box{
text-align: left;
}
</style
4.接收事件的页面:dd.vue
<template>
<div>
<h2>小d页面视图</h2>
</div>
</template>
<script setup>
import bus from "../utils/EventBus"
import { ref ,onMounted} from "vue";
onMounted(()=>{
bus.on("data",(info)=>{
console.log("dd页面接收到的值:",info)
})
})
</script>
5.点击bb页面按钮:
更多推荐
所有评论(0)