vue使用bus匯流排，實現非父子元件間的通訊

vue元件通訊方式有好多，可以使用props傳值，但是props只能父子元件使用。也可以使用vuex，但是vuex比較重，而且非全域性的通訊最好不要使用vuex

在簡單的場景下，可以使用乙個空的vue例項作為**事件匯流排。

這裡有兩種方式可以使用

第一種是新建乙個bus.js檔案，初始化乙個空的vue例項，作為**匯流排，然後再元件引用時呼叫這個bus.js檔案

import vue from 'vue';

const eventbus = new vue();
export default eventbus;

第二種是全域性定義，將bus掛載到vue.prototype上

import vue from 'vue';

vue.prototype.bus = new vue();

下面根據乙個例項來看一下這兩種寫法

子元件1

<

template
>
<
section
>
<
h1>left
h1>
<
el-button 
type
="primary"
@click
="isclick"
>點選
el-button
>
section
>
template
>
<
script
>
import eventbus from 
'~/utils/eventbus';
export 
default
}}script
>

子元件2

<

template
>
<
section
>
<
h1>right
h1>
section
>
template
>
<
script
>
import eventbus from 
'~/utils/eventbus';
export 
default
; },
mounted() );
eventbus.$on(
'isleft
', (info) 
=>
); },
beforedestroy() 
}script
>

父元件

<

template
>
<
section
>
<
el-row
>
<
el-col 
:span
="12"
>
<
left
/>
el-col
>
<
el-col 
:span
="12"
>
<
right 
/>
el-col
>
el-row
>
section
>
template
>
<
script
>
import left from 
'~/components/left
'import right from 
'~/components/right
'export 
default
}script
>

以上事例，我們在元件1中觸發了事件，然後元件2中監聽到事件，並進行相關操作，兩個元件是非父子元件通訊

總結1.可以實現vue跨級元件之間的通訊，在實際的開發專案中，如果資料和業務邏輯不是特別複雜，沒有必要使用vuex，那麼我們就可以通過這種方式，實現我們再實際業務邏輯中的元件間資料傳遞，而且**比較簡潔直觀。

2.註冊的匯流排事件要在元件銷毀時解除安裝，否則會多次掛載，造成觸發一次但多個響應的情況

嗯，就醬~~

vue基礎之事件匯流排bus（非父子元件傳值通訊）

事件匯流排其實就是一種非父子關係的通訊方式 1 給vue的原型上掛載乙個vue例項 vue.prototype.bus newvue 2 傳送事件，傳送資料 this.bus.emit 事件名 資料 3 監聽事件，獲取資料 this.bus.on 事件名 資料 doctype html utf 8 ...

Vue傳值 bus匯流排機制

眾所周知，vue提供了很多套元件間傳值的方法，父子元件直接用props和 emit就好，大型專案則用vuex，但有一種更適合在小專案中使用的非父子元件傳值方法，即bus匯流排機制。它的用法的實現原理是前端面試中常考的。在第一次換工作的時候，幾乎所有面試官都問了有關vue元件傳值的幾種方法，所以掌握這...

Vue中的事件匯流排 bus

在vue中，我們父子之間通訊簡單明瞭 父元件向子元件傳值 props，在父元件中，用 要傳遞過去的名字 要傳遞的值 在子元件中 使用props 接受即可 子元件向父元件傳值 emit.通過自定義方法，在子元件中，我們使用this.emit 方法名 引數 向父元件傳值 在父元件中，我們使用子元件傳遞過...