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

Posted 2021-11-30 nlyangtong

在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();//打开父级页