快捷導(dǎo)航

vue3中事件總線mitt代碼實例(第三方庫mitt)

更新時間：2023年09月18日 08:40:35 作者：摩羯柚子

這篇文章主要給大家介紹了關(guān)于vue3中事件總線mitt(第三方庫mitt)的相關(guān)資料,Mitt是一個在Vue.js應(yīng)用程序中使用的小型事件總線庫,該庫允許組件進行通信,而不必過度依賴父級或子級組件之間的props,需要的朋友可以參考下

1.安裝mitt：npm install mitt -save

2. 新建EventBus.js文件：

// 事件總線第三方庫：
import mitt from 'mitt';
const bus = mitt();
export default bus;

3.發(fā)出事件的頁面：bb.vue

<template>
    <div class="box">
        <h2>小b頁面視圖</h2>
        <button @click="sendData">局部事件總線：點擊之后給cc頁面?zhèn)鬟f一個值</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頁面按鈕：

總結(jié)

到此這篇關(guān)于vue3中事件總線mitt的文章就介紹到這了,更多相關(guān)vue3事件總線mitt內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

在?Vite項目中使用插件?@rollup/plugin-inject?注入全局?jQuery的過程詳解
在一次項目腳手架升級的過程中，將之前基于?webpack?搭建的項目移植到?Vite?構(gòu)建，這篇文章主要介紹了在?Vite項目中，使用插件?@rollup/plugin-inject?注入全局?jQuery,需要的朋友可以參考下
2022-12-12
關(guān)于vue3默認把所有onSomething當作v-on事件綁定的思考
這篇文章主要介紹了關(guān)于vue3默認把所有`onSomething`當作`v-on`事件綁定的思考,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧
2020-05-05
聊聊Vue中provide/inject的應(yīng)用詳解
這篇文章主要介紹了聊聊Vue中provide/inject的應(yīng)用詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧
2019-11-11
Vue動態(tài)添加表單的實現(xiàn)方法
在Vue.js應(yīng)用中,動態(tài)表單是一個常見的需求,尤其是當表單字段的數(shù)量和類型需要根據(jù)用戶輸入或系統(tǒng)狀態(tài)動態(tài)變化時,本文將詳細介紹如何在Vue中實現(xiàn)動態(tài)表單的創(chuàng)建,并通過多個示例展示具體的實現(xiàn)方法,需要的朋友可以參考下
2024-09-09
Vue3子組件向父組件傳值的兩種實現(xiàn)方式
近期學(xué)習vue3的父子組件之間的傳值,發(fā)現(xiàn)跟vue2的并沒有太大的區(qū)別,這篇文章主要給大家介紹了關(guān)于Vue3子組件向父組件傳值的兩種實現(xiàn)方式,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-04-04
前端開發(fā)利器Vite完整版詳解
這篇文章主要給大家介紹了關(guān)于前端開發(fā)利器Vite完整版詳解的相關(guān)資料,Vite是一種基于ES模塊的開發(fā)服務(wù)器和構(gòu)建工具,專為現(xiàn)代化的前端開發(fā)而設(shè)計,需要的朋友可以參考下
2023-11-11
解析vue.js中常用v-指令
本文以click為例給大家介紹vue.js中常用v-指令，可以用 v-on 指令監(jiān)聽 DOM 事件，并在觸發(fā)時運行一些 JavaScript代碼，本文通過示例代碼給大家介紹的非常詳細，感興趣的朋友跟隨小編一起看看吧
2021-10-10
vue2.0 中#$emit,$on的使用詳解
這篇文章主要介紹了vue2.0 中#$emit,$on的使用詳解,需要的朋友可以參考下
2017-06-06
通過vue刷新左側(cè)菜單欄操作
這篇文章主要介紹了通過vue刷新左側(cè)菜單欄操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
Vue3中Element-Plus分頁(Pagination)組件的使用
Element-Plus分頁(Pagination)組件在開發(fā)過程中數(shù)據(jù)展示會經(jīng)常使用到,同時分頁功能也會添加到頁面中,下面我們就來學(xué)習一下它的具體使用,需要的可以參考一下
2023-11-11