可以用過一個vue實例Bus作為媒介,要相互通信的兄弟組件之中,都引入Bus,之后通過分別調(diào)用Bus事件觸發(fā)on來實現(xiàn)組件之間的通信和參數(shù)傳遞,類似window的全局自定義事件。類似與子傳父,只不過是利用一個新的vue示例作為媒介,而不是當前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ù)的時候調(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組件傳遞過來的數(shù)據(jù): ${val}`); // hello
}
}
}
</script>