Vue中bus的使用詳解
更新時間：2021年04月02日 10:05:22 作者：bugSource
這篇文章主要介紹了Vue中bus的使用,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
vue總線機(jī)制(bus)
vue中非父子組件之間通信除了使用vuex，也可以通過bus總線，兩者適用場景不同。
bus適合小項目、數(shù)據(jù)被更少組件使用的項目，對于中大型項目 數(shù)據(jù)在很多組件之間使用的情況 bus就不太適用了。bus其實就是一個發(fā)布訂閱模式，利用vue的自定義事件機(jī)制，在觸發(fā)的地方通過$emit向外發(fā)布一個事件,在需要監(jiān)聽的頁面，通過$on監(jiān)聽事件。
vuex適用中大型項目、數(shù)據(jù)在多組件之間公用的情況。
組件通信bus的使用
在utils文件下下創(chuàng)建bus.js
// utils - bus.js import Vue from 'vue' const bus = new Vue() export default bus
一、傳值
發(fā)送信息
import bus from '@/utils/bus'
第一個參數(shù)為標(biāo)志變量，第二個參數(shù)為通信的值
us.$emit('message', 'hello');
接收信息
import bus from '@/utils/bus'
第一個參數(shù)為標(biāo)志變量，第二個參數(shù)中的e為通信的值
bus.$on('message', (e) => {
console.log(e)
})
二、調(diào)用方法
一個組件(A)調(diào)用另一個組件(B)的方法
B組件的方法
import bus from '@/utils/bus'
mounted () {
bus.$on('testA', this.testA)
},
testA () {
console.log('由A組件調(diào)用')
}
A組件調(diào)用
import bus from '@/utils/bus'
mounted () {
bus.$emit('testA')
}
到此這篇關(guān)于Vue中bus的使用的文章就介紹到這了,更多相關(guān)vue bus使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在Vue應(yīng)用中，有時我們需要實現(xiàn)文件預(yù)覽和打印的功能，比如，我們可能需要預(yù)覽并打印PDF文件、圖片文件等，本文將介紹如何在Vue中實現(xiàn)文件預(yù)覽和打印的功能，并提供相應(yīng)的代碼示例2023-06-06
vue觸發(fā)真實的點(diǎn)擊事件跟用戶行為一致問題
這篇文章主要介紹了vue觸發(fā)真實的點(diǎn)擊事件跟用戶行為一致問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
序號算是在展示數(shù)據(jù)的時候，一種很普遍的屬性了，我們可以自己寫生成序號的規(guī)則，也可以借助第三方，這篇文章主要介紹了Vue使用Element-UI生成并展示表頭序號的方法,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了詳解vue移動端項目代碼拆分記錄，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了關(guān)于axios在vue中的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
組件化開發(fā)能大幅提高應(yīng)用的開發(fā)效率、測試性、復(fù)用性等,下面這篇文章主要給大家介紹了關(guān)于通用vue組件化展示列表數(shù)據(jù)的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細(xì)介紹了Vue.js組件通信之自定義事件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要介紹了vue金額格式化保留兩位小數(shù)的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
AT-UI 是一款基于 Vue.js 2.0 的輕量級、模塊化前端 UI 組件庫，主要用于快速開發(fā) PC 網(wǎng)站產(chǎn)品。下面通過本文給大家介紹Vue 2.0的模塊化前端 UI 組件庫，需要的朋友參考下吧2017-12-12
動態(tài)綁定是我們?nèi)粘ｉ_發(fā)中經(jīng)常遇到的一個需求，下面這篇文章主要給大家介紹了關(guān)于vue動態(tài)綁定圖標(biāo)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2021-05-05