可以用過(guò)一個(gè)vue實(shí)例Bus作為媒介，要相互通信的兄弟組件之中，都引入Bus，之后通過(guò)分別調(diào)用Bus事件觸發(fā)$emit和監(jiān)聽(tīng)$on來(lái)實(shí)現(xiàn)組件之間的通信和參數(shù)傳遞，類似window的全局自定義事件。類似與子傳父，只不過(guò)是利用一個(gè)新的vue示例作為媒介，而不是當(dāng)前vue示例(this)
// bus.js
import Vue from 'vue';
export default new Vue;
// a.js
<template>
? <div class='a'></div>
</template>
<script>
import Bus from 'bus.js' ;
export default {
? name: "a",
? created() {
? ? // 在需要的傳遞數(shù)據(jù)的時(shí)候調(diào)用sendData方法，這里模擬調(diào)用
? ? this.sendData();
? },
? methods: {
? ? sendData () {
? ? ? Bus.$emit('listenToA', 'hello');
? ? }
? }
}
</script>
// b.js
<template>
? <div class='b'></div>
</template>
<script>
import Bus from 'bus.js';
export default {
? name: "b",
? monted() {
? ? Bus.$on('listenToA', this.getAData);
? },
? methods: {
? ? getAData (val) {
? ? ? console.log(`a組件傳遞過(guò)來(lái)的數(shù)據(jù): ${val}`); // hello
? ? }
? }
}
</script>
