vuex了解一下

vuex就是專門為這種情況誕生的啦~非常好用，當(dāng)你的組件嵌套非常深的時候，父子間的通訊就會非常繁瑣難受，vuex相當(dāng)于一個保存全局變量的倉庫，全部組件都能訪問。

• 父組件內(nèi)

獲取消息.callback(this.$store.state.commit('setMsg',newMsg));
獲取消息后把他存到全局倉庫中

• 子組件內(nèi)

直接計算屬性獲取全局倉庫的新消息，如果有就做你想做的事唄~

computed(){
    newMsg(){
        return this.$store.state.newMsg;
    }
}

偽代碼

import EventEmitter from 'events'

window.eventEmitter = new EventEmitter()
// 父頁面中
window.eventEmitter.emit('myEvent')
// 子頁面中
window.eventEmitter.on('myEvent'， function () {
  // do something
})

或者vue中也可以

const bus = new Vue()
// 父頁面
bus.$emit('myEvent', data)
// 子頁面
bus.$on('myEvent', data => {
  // do something
})

就用$on，$emit就很合適了，把通知跟監(jiān)聽統(tǒng)一放到根組件

this.$root.$emit('message')

this.$root.$on('message', () => {

})