问题:navigateBack()emit事件在onload()监听不到
从A页面跳转到B页面,在B点击产生数据后,跳转回到A,并告诉A点击的数据是什么,使用:
navigateBack()。
(页面跳转流程: A->B ->A)
B页面:
toPage() {uni.navigateBack({complete: (res) => {console.log(">>>com ", res)this.getOpenerEventChannel().emit('selecteCust', this.selectCustomer)},success: (res) => {console.log(">>>res", res)// res.eventChannel.emit('testCust', {data: this.selectCustomer})// 打开成功的话, 向打开的页面传递数据,传递的事件名:selecteCustthis.getOpenerEventChannel().emit('selecteCust', this.selectCustomer)}})},
A页面:
eventChannel.on无法监听到B传递过的事件: selecteCust
onLoad() {// 监听事件this.ec = this.getOpenerEventChannel();console.log(">|--,,,,,,,,,,,eventchannel", this.ec)this.ec.on('testCust', (res) => {console.log("................selecteCust,监听到了", res)})},
官方文档
uni.navigateTo()
uni.navigateBack()
分析:当前传递参数方式是下级给上级传递消息,使用navigiateBack()话,要在跳转之后再
解决:
方式1:navigateBack()改成navigateTo()可以
onLoad() {// 监听事件this.ec = this.getOpenerEventChannel();console.log(">|--,,,,,,,,,,,eventchannel", this.ec)this.ec.on('testCust', (res) => {console.log("................selecteCust,监听到了", res)this.customer = res.data})},
效果:
方式2:
A->B->A, A跳转地方添加监听event
selectA() {uni.navigateTo({url: '/pages/custList',// 页面跳转回来事件监听events: {selecteCust: (data) => {console.log(">>选中的客户是", data)}})},
区分:uni.$on和eventChannel.on使用推荐
两者使用起来其实差不多,都可以达到父传子,子传父的作用。但是因为作用域的原因,evenetChannel在不同页面的变量可以重名,eventChannel更适合父传子,uni.$on适合子传父
官方文档:
uni.navigateTo(OBJECT) | uni-app官网