1. 程式人生 > 實用技巧 >vue 返回時帶引數問題

vue 返回時帶引數問題

百度了一些辦法,用$emit暫存,到返回後的頁面去接收,一直得不到資料。方法如下:

1. 宣告一個空的Vue模組eventBus
import Vue from 'vue'
/** * 定義空的vue例項,作為 eventbus實現非父子元件之間的通訊(vue2.x中去掉了broadcast) */ var eventBus = new Vue({}); export default eventBus;

2.通過eventBus.$emit傳參給上一個頁面

import eventBus from '../service/eventbus.js';
 
methods:{    //列表選中具體醫院的點選事件
    goback(hospital){        //傳遞一個map,choiceHospital是key,hospital是value
        eventBus.$emit('target','2');        //呼叫router回退頁面
        this.$router.go(-1);
    }
}

3.頁面接收引數

import eventBus from '../eventbus.js';//每次啟用時
created(){    //根據key名獲取傳遞回來的引數,data就是map
    eventBus.$on('target', function(data){        //賦值給首頁的附近醫院資料模型
        this.activeTab = data;
    }.bind(this));
},

 經過探索輸出,發現eventBus時間在created事件發生之前就已經被呼叫。解決方法如下:在後一個頁面created和mounted發生後前一個頁面銷燬之前傳送資料

 beforeDestroy() {
       console.log('準備傳送了!!!');
       eventBus.$emit('target', '2');
       eventBus.$off('target');
},

  參考文章:

Vue——eventBus使用,重複觸發

https://blog.csdn.net/where_slr/article/details/101024169?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param