vue匯流排機制(bus)

vue中非父子元件之間通訊除了使用vuex，也可以通過bus匯流排，兩者適用場景不同。

bus適合小專案、資料程式設計客棧被更少元件使用的專案，對於中大型專案 資料在很多元件之間使用的情況 bus就不太適用了。bus其實就是一個釋出訂閱模式，利用vue的自定義事件機制，在觸發的地方通過$emit向外釋出一個事件,在需要監聽的頁面，通過$on監聽事件。

vuex適用中大型專案、資料在多元件之間公用的情況。

元件通訊bus的使用

在utils檔案下下建立bus.js

// utils - bus.js
import Vue from 'vue'
const bus = new Vue()
export default bus
 
程式設計客棧 

一、傳值

傳送資訊

import bus fromwww.cppcns.com '@/utils/bus'

第一個引數為標誌變數，第二個引數為通訊的值

us.$emit('message','hello');

接收資訊

import bus from IDyDKiab'@/utils/bus'

第一個引數為標誌變數，第二個引數中的e為通訊的值

bus.$on('message',(e) => {
 console.log(e)
})

二、呼叫方法

一個元件(A)呼叫另一個元件(B)的方法

B元件的方法

import bus from '@/utils/bus'
mounted () { 
 bus.$on('testA',this.testA) 
},testA () {
 console.log('由A元件呼叫')
}

A元件呼叫

import bus from '@/utils/bus'
mounted () {
 bus.$emit('testA')
}

到此這篇關於Vue中bus的使用的文章就介紹到這了,http://www.cppcns.com更多相關vue bus使用內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！