eventbus（兄弟組件傳參）

應(yīng)用場(chǎng)景：擁有共同父級(jí)頁(yè)面的兩個(gè)頁(yè)面?zhèn)鲄?br> 原理：vue一個(gè)新的實(shí)例，類(lèi)似于一個(gè)站，連接著兩個(gè)組件，也就是一個(gè)中央事件總線；
實(shí)戰(zhàn)：

在utils文件下創(chuàng)建一個(gè)bus實(shí)例：

1627870785(1).png

import Vue from 'vue'
export default new Vue()

通過(guò)Bus.$emit()傳參

1.在需要傳參的頁(yè)面引入Bus文件
2.通過(guò)Bus.$emit('name'，'value')傳參

1627870968(1).png

Bus.$emit('sendBybus', this.ofertimes)

(pass:$emit實(shí)例方法觸發(fā)當(dāng)前實(shí)例(這里的當(dāng)前實(shí)例就是bus)上的事件,附加參數(shù)都會(huì)傳給監(jiān)聽(tīng)器回調(diào)。)

通過(guò)Bus.$on("name", data => {});

1.在需要接收的頁(yè)面引入Bus文件
2.通過(guò)Bus.$on("name", data => {});接收

1627871693(1).png

//寫(xiě)在created或mounted中均可以
created() {
  eventBus.$on("name", data => {
    console.log("A組件傳給B組件的", data);
  });
}

(pass:on:監(jiān)聽(tīng)當(dāng)前實(shí)例上的自定義事件(此處當(dāng)前實(shí)例為bus)。事件可以由emit觸發(fā)，回調(diào)函數(shù)會(huì)接收所有傳入事件觸發(fā)函數(shù)($emit)的額外參數(shù)。)