uni-app頁面通信，傳遞復雜數據

> 使用 uni.navigateTo 跳轉B頁面（指下方代碼的 test.vue 頁面），跳轉完成后，會觸發 navigateTo 的回調函數success，使用 res.eventChannel 向被打開的頁面傳送數據。

> 被打開的頁面B頁面（test.vue），也可以在頁面任意處，使用代碼 this.getOpenerEventChannel().emit('acceptDataFromOpenedPage', { data: 'test' }); 觸發A頁面 navigateTo 中 events 事件頻道中定義的事件（事件名稱要一致）。

 

A頁面

 

methods: {
    // 跳轉到B頁面test.vue
    jumpNewPage() {
        // 2.8.9+ 支持
        uni.navigateTo({
            // 跳轉到的目標頁面
            url: 'pages/test?id=1',
            // 頁面間通信接口，用於監聽被打開頁面發送到當前頁面的數據。2.8.9+ 開始支持。
            events: {
                /// 添加一個監聽器，名稱為acceptDataFromOpenedPage，用於獲取被打開頁面傳送到當前頁面的數據
                ///     B頁面test.vue，使用eventChannel.emit('acceptDataFromOpenedPage', { data: 'test' }); 觸發此監聽函數
                acceptDataFromOpenedPage: function(data) {
                    console.log(data);
                },
                // 同上
                someEvent: function(data) {
                    console.log(data);
                }
            },
            // 接口調用成功的回調函數，即跳轉到B頁面 test.vue 后的回調函數
            success: function(res) {
                // 通過eventChannel向被打開頁面傳送數據
                res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' });
            }
        });
    }
}

 

 

B頁面text.vue

// uni.navigateTo 到的目標頁面 pages/test.vue 的頁面加載事件
onLoad: function(option) {
    console.log(option.query);
    
    // 獲取 eventChannel 事件頻道
    const eventChannel = this.getOpenerEventChannel();
    
    // 觸發事件頻道 eventChannel 上已存在的事件（即A頁面在 navigateTo events 中的監聽器事件）
    eventChannel.emit('acceptDataFromOpenedPage', { data: 'test' });
    eventChannel.emit('someEvent', { data: 'test' });
    
    // 監聽 acceptDataFromOpenerPage 事件，獲取上一頁面通過事件頻道 eventChannel 傳送到當前頁面的數據
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
        console.log(data);
    });
}