微信小程序Component页面通信

tech2022-09-11  104

使用Component

前言index.jstest.js注意

前言

从index页面跳转到test页面(使用Component组件),该如何实现页面通信呢?如下图所示:

index.js

wx.navigateTo({ url: '/pages/test/test?id=123', events: { // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据 acceptDataFromOpenedPage: function(data) { console.log(data) }, }, success: function(res) { // 通过eventChannel向被打开页面传送数据 res.eventChannel.emit('acceptDataFromOpenerPage', { msg: '你是被打开的test页面' }) } })

test.js

let eventChannel Component({ properties: { id: Number, }, data: { msg: '' }, ready: function(){ eventChannel = this.getOpenerEventChannel() eventChannel.emit('acceptDataFromOpenedPage', {msg: '你是原页面index'}); // 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据 eventChannel.on('acceptDataFromOpenerPage', (data) => { console.log(data) this.setData({ msg: data.msg }) }) console.log(` Component从properties中获取url的参数,id=${this.data.id} Component在ready函数中调用setData,msg=${this.data.msg} `) }, })

注意

created 函数中不能调用 setData 函数ready 函数中可以调用 setData 函数
最新回复(0)