【前端笔记】小程序页面之间数据通信

1、数据主动传的情况,PageA向PageB传递

Page A : 在success方法中获取到res参数,这是目标页面的返回对象, res.eventChannel就是目标Page的eventChannel,这时调用emit方法可以触发目标页面中的event事件完成数据的传递

Taro.navigateTo({

    url: '/pages/my/index',

    success(res: any) {

        res.eventChannel.emit('onPrePageSendMessage', '上一个页面的数据');

    }

})


Page B:需要在Page B的componentDidMount(onLoad)方法中监听Page A的事件event,也是要先获取到eventChannel对象,调on方法来监听,第二个参数就是回调函数,在里面就可以获取到Page A传过来的数据了

useEffect(() => {

    let pages = Taro.getCurrentPages();

    let eventChannel = pages[pages.length - 1].getOpenerEventChannel();

    eventChannel.on('onPrePageSendMessage', (params: string) => {

        setVal(params);

     })

}, [])

2、数据回传的情况

Page A:业务情况,Page A有一些数据需要跳转到Page B填写,Page B填写完成后返回到Page A,这时可以在Page B中调用到Page A的方法,相当于从Page B传数据给Page A

Taro.navigateTo({

    url: '/pages/my/index',

    events: {

        indexPageEvent1(data: string) {

            setVal(data);

        }

    }

})


Page B:首先先获取到这个page的eventChannel对象,调用page对象的getOpenerEventChannel方法获取eventChannel对象

let pages = Taro.getCurrentPages();

let eventChannel = pages[pages.length - 1].getOpenerEventChannel();

// 通过eventChannel对象的emit方法可以触发上一个页面创建的event

eventChannel.emit('indexPageEvent1', 'Page B传回给你的数据');

网友评论

0条评论

发表

网友评论

0条评论

发表

最新评论

推荐文章

彩龙

Copyright © 2008-2022 彩龙社区 版权所有 All Rights Reserved.

免责声明: 本网不承担任何由内容提供商提供的信息所引起的争议和法律责任。

经营许可证编号:滇B2-20090009-7

下载我家昆明APP 下载彩龙社区APP