vue3中事件总线mitt（第三方库mitt）

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页面按钮：

最后

以上就是兴奋白羊为你收集整理的vue3中事件总线mitt（第三方库mitt）的全部内容，希望文章能够帮你解决vue3中事件总线mitt（第三方库mitt）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。