mui触发自定义事件(子页面返回传递给父级页面值)

时间:2022-04-04 20:34:01

在App开发中,经常会遇到子页面给父级页面传值,通过自定义事件,用户可以轻松实现数据传递。

一、添加自定义事件监听操作和标准js事件监听类似,可直接通过window对象添加,如下:

window.addEventListener('customEvent',function(event){

         //通过event.detail可获得传递过来的参数内容....

});

1、customEvent   自定义事件的名称

2、function    接收到值后处理的方法

二、触发自定义事件

通过mui.fire()方法可触发目标窗口的自定义事件:

mui.fire( target , event , data )

    1、target    Type:WebviewObject    需传值的目标webview

    2、event    Type:String    自定义事件名称

    3、data    Type:JSON    json格式的数据

目标webview必须触发loaded事件后才能使用自定义事件

若新创建一个webview,不等该webview的loaded事件发生,就立即使用mui.fire(webview,'eventName',{}),则可能无效;

例子:

父级页面:

 

1 window.addEventListener('nameFun',function(event){
2 
3     //通过event.detail可获得传递过来的参数内容....
4 
5     //event.detail为获取到的值{yqid:""+chooseyqid+"",bbb:"bbb"}
6    var chooseYqidC = event.detail.chooseYqid;//获取yqid的值chooseyqid
7 });

 

子页面:

1 var selfPage = plus.webview.currentWebview();//获取当前页(子页)
2 
3 var openerPage = selfPage.opener();//获取打开的父级页
4 
5 mui.fire(openerPage,'nameFun',{yqid:""+chooseyqid+"",bbb:"bbb"});
6 
7 selfPage.close();//关闭当前子页
8 
9 openerPage.show();//打开父级页