vue3中事件總線mitt代碼實(shí)例(第三方庫(kù)mitt)
更新時(shí)間：2023年09月18日 08:40:35 作者：摩羯柚子
這篇文章主要給大家介紹了關(guān)于vue3中事件總線mitt(第三方庫(kù)mitt)的相關(guān)資料,Mitt是一個(gè)在Vue.js應(yīng)用程序中使用的小型事件總線庫(kù),該庫(kù)允許組件進(jìn)行通信,而不必過(guò)度依賴(lài)父級(jí)或子級(jí)組件之間的props,需要的朋友可以參考下
1.安裝mitt：npm install mitt -save
2. 新建EventBus.js文件：
// 事件總線第三方庫(kù)： import mitt from 'mitt'; const bus = mitt(); export default bus;
3.發(fā)出事件的頁(yè)面：bb.vue
<template>
<div class="box">
<h2>小b頁(yè)面視圖</h2>
<button @click="sendData">局部事件總線：點(diǎn)擊之后給cc頁(yè)面?zhèn)鬟f一個(gè)值</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;
}
</style4.接收事件的頁(yè)面：dd.vue
<template>
<div>
<h2>小d頁(yè)面視圖</h2>
</div>
</template>
<script setup>
import bus from "../utils/EventBus"
import { ref ,onMounted} from "vue";
onMounted(()=>{
bus.on("data",(info)=>{
console.log("dd頁(yè)面接收到的值：",info)
})
})
</script>5.點(diǎn)擊bb頁(yè)面按鈕：
總結(jié)
到此這篇關(guān)于vue3中事件總線mitt的文章就介紹到這了,更多相關(guān)vue3事件總線mitt內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了Vue-Router模式和鉤子的用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
vue基于mint-ui的城市選擇3級(jí)聯(lián)動(dòng)的示例
本篇文章主要介紹了vue基于mint-ui的城市選擇3級(jí)聯(lián)動(dòng)的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
vue中在vuex的actions中請(qǐng)求數(shù)據(jù)實(shí)例
今天小編就為大家分享一篇vue中在vuex的actions中請(qǐng)求數(shù)據(jù)實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
詳解vue3?defineModel如何實(shí)現(xiàn)雙向綁定
隨著?Vue?3.3?引入的?defineModel?宏,開(kāi)發(fā)者可以更加簡(jiǎn)潔地實(shí)現(xiàn)組件內(nèi)部的雙向數(shù)據(jù)綁定,下面就跟隨小編一起來(lái)學(xué)習(xí)一下如何使用defineModel實(shí)現(xiàn)雙向綁定吧2024-12-12
vue+axios 前端實(shí)現(xiàn)的常用攔截的代碼示例
這篇文章主要介紹了vue+axios 前端實(shí)現(xiàn)的常用攔截的代碼示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Vue框架可以很方便的引入各種插件,但是也因此會(huì)經(jīng)常遇到種編譯報(bào)錯(cuò),這篇文章主要給大家介紹了關(guān)于vue前端編譯報(bào)錯(cuò)解決的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
這篇文章主要介的是?Vue中如何使用?class?類(lèi)樣式的方法，在vue中為我們提供了幾種方式來(lái)使用class類(lèi)的樣式，分別是布爾值、表達(dá)式、多類(lèi)封裝、下面來(lái)看看文章的詳細(xì)介紹內(nèi)容吧,需要的朋友可以參考一下2021-11-11
基于Vue 2.0的模塊化前端 UI 組件庫(kù)小結(jié)
AT-UI 是一款基于 Vue.js 2.0 的輕量級(jí)、模塊化前端 UI 組件庫(kù)，主要用于快速開(kāi)發(fā) PC 網(wǎng)站產(chǎn)品。下面通過(guò)本文給大家介紹Vue 2.0的模塊化前端 UI 組件庫(kù)，需要的朋友參考下吧2017-12-12
如何解決Vue3組合式API模式下動(dòng)態(tài)組件不渲染問(wèn)題
這篇文章主要介紹了如何解決Vue3組合式API模式下動(dòng)態(tài)組件不渲染問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教<BR>2024-03-03
vue使用element-ui tabs切換echarts解決寬度100%方式
這篇文章主要介紹了vue使用element-ui tabs切換echarts解決寬度100%方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07