鍍金池/ 問答/HTML/ vue 嵌套路由如何進行父子間的相互通信？

vue 嵌套路由如何進行父子間的相互通信？

問題描述

現(xiàn)在正在做的項目是vue+vue-router+vue-cli,想實現(xiàn)的功能是，父頁面有個全局的消息推送，希望能一有消息推送時就自動更新某個子頁面的數(shù)據(jù)。

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

已經(jīng)嘗試過直接把子頁面import進父頁面里，然后直接.methods.方法來調用，但是會提示方法內的一些變量沒有定義。然后就換了一種思路，想著父組件一有消息推送過來，就發(fā)送一個狀態(tài)給子頁面，子頁面一直用watch 監(jiān)聽父組件發(fā)過來的信息，然后直接在子頁面進行數(shù)據(jù)更新。但是現(xiàn)在的問題是，我看了很多用prop方式進行父->子通信的例子，都沒有用路由嵌套，而是直接把子頁面components進父頁面的，所以這個方法也不行。$on,$emit的方法貌似只能在兄弟組件間通信。由于項目已經(jīng)做了很大一部分了，現(xiàn)在引入vuex又有點晚了，希望看看大佬們有沒有什么其他的辦法。謝謝了。

回答
編輯回答
你好胸

vuex了解一下

2018年1月9日 23:31
編輯回答
膽怯

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

  • 父組件內

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

  • 子組件內

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

computed(){
    newMsg(){
        return this.$store.state.newMsg;
    }
}
2017年5月28日 10:07
編輯回答
青裙

偽代碼

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
})
2018年3月28日 05:03
編輯回答
青黛色

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

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

})
2018年4月19日 02:29