之前在使用vue開發(fā)后臺管理系統(tǒng)時(shí)句喜，頭部按鈕點(diǎn)擊查剖，左側(cè)菜單導(dǎo)航展開和收縮的功能飒泻，由于菜單導(dǎo)航和頭部是兩個(gè)組件缅刽，所以這個(gè)時(shí)候就涉及到非父子組件通信。
有必要思考兩個(gè)問題：
1. Vue 中非父子組件通信的方法有哪些
答：常用的方法有 EventBus 和 Vuex(Vuex暫不說明蠢络，兩者使用場景都可以查看官方文檔)衰猛。
2. EventBus 實(shí)現(xiàn)非父子組件通信的原理是什么
答：通過實(shí)例化一個(gè)Vue對象( 比如bus = new Vue() )作為母線，在組件中通過事件將參數(shù)傳遞出去( bus.$emit(event, [...args]) )刹孔，然后在其他組件中再通過bus( 這里按照剛前面實(shí)例化Vue對象后的叫法 )來監(jiān)聽此事件并接受參數(shù)( bus.$on(event, callback) )啡省。
PS: 共用同一個(gè)Vue的實(shí)例( new Vue() )，通過此實(shí)例進(jìn)行事件傳遞參數(shù)髓霞，在其他組件中監(jiān)聽此事件并且接收參數(shù)實(shí)現(xiàn)通信卦睹。
例子（非上面的導(dǎo)航菜單功能）:
bus.js （實(shí)例化一個(gè)Vue對象）
/**
* 使用 EventBus
*/
import Vue from 'vue'
const bus = new Vue()
export default bus
組件Hello.vue
<template>
<div class="hello">
<h1>參數(shù)：{{ number }}</h1>
<button @click="sendParam()">發(fā)送</button>
</div>
</template>
<script>
import bus from './bus'
export default {
data () {
return {
number: 123
}
},
methods: {
sendParam () {
bus.$emit('getParam', this.number)
}
}
}
</script>
組件World.vue
<template>
<div class="hello">
<h1>接受參數(shù){{ number }}</h1>
</div>
</template>
<script>
import bus from './bus'
export default {
data () {
return {
number: 0
}
},
created () {
bus.$on('getParam', param => {
this.number = param
})
},
beforeDestroy () {
bus.$off('getParam')
}
}
</script>
組件Home.vue （同時(shí)引入Hello.vue組件和World.vue組件）
<template>
<div class="home">
<hello></hello>
<world></world>
</div>
</template>
<script>
import Hello from '@/components/Hello'
import World from '@/components/World'
export default {
name: 'Home',
data () {
return {
}
},
components: {
Hello,
World
}
}
</script>
效果圖展示：
傳遞參數(shù)前：
image.png
傳遞參數(shù)后：
image.png
