uniapp中使用uni.$emit和uni.$on进行页面通讯传值

自 HBuilderX 2.0.0 起支持 uni.$emit、 uni.$on 、 uni.$once 、uni.$off ，可以方便的进行页面的通讯 ，触发的事件都是 App 全局级别的，跨任意组件，页面，nvue，vue 等。事件详情

含义
1.uni.$emit(eventName,OBJECT)：监听全局的自定义事件，事件由uni.emit 触发，回调函数会接收事件触发函数的传入参数。

其中eventName为事件名，OBJECT为触发事件附加参数
示例代码如下：

uni.$emit('update',{msg:'页面更新'})

 

1
2.uni.$on(eventName,callback)：监听全局自定义事件，事件由uni.$emit()触发，回调函数会接收所有传入的数。
eventName为事件名，callback为事件的回调函数。
示例代码如下：

uni.$on('update',function(data){ 
    console.log('监听到事件来自 update ，携带参数 msg 为：'  + data.msg); 
})

 

uni.$once：监听全局的自定义事件，事件由uni.emit 触发，但仅触发一次，在第一次触发之后移除该监听器。不需要手动移除监听
uni.$off：移除全局自定义事件监听器
具体如何使用呢？我们假设一个场景，进入app,是未登陆状态，需要在我的页面点击登陆，进入登陆页面进行登陆。登陆成功之后，返回到我的页面，实时显示登陆后的用户信息。

监听事件
首先，在我的页面监听事件。

 

// 我的页面  
onLoad(){  
    // 监听事件  
    uni.$on('login',(usnerinfo)=>{  
        this.usnerinfo = usnerinfo;  
    })  
},  

onUnload() {  
  // 移除监听事件  
   uni.$off('login');  
},

 

因为事件监听是全局的，所以使用 uni.$on ，需要使用 uni.$off 移除全局的事件监听，避免重复监听。

触发事件
进入登陆页面，触发事件

// 登陆页面  
uni.$emit('login', {  
  avatarUrl: 'xxx',  
  token: 'user123456',  
  userName: 'unier',  
  login: true  
});

 

使用 uni.$emit 触发事件后，对应的 uni.$on 就会监听到事件触发，在回调中去执行相关的逻辑。

更多使用场景
以上只是一个简单的场景应用。而我们开发中会遇到很多页面间通讯场景，如：

vue 与 nvue，nvue 与 vue 间的通讯
tabbar 页面之间的通讯
父页面与多级子页面间的通讯
基本上述场景均可以实现，本质上就是一个页面通知另一个面我发生了变化，你需要处理一下。绝大部分页面的通讯都可以使用 uni.$emit、 uni.$on 、 uni.$once 、uni.$off 四个事件完成。

Tips

如果uni.$off没有传入参数，则移除App级别的所有事件监听器；
如果只提供了事件名（eventName），则移除该事件名对应的所有监听器；
如果同时提供了事件与回调，则只移除这个事件回调的监听器；
提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器；
示例：

    <template>
        <view class="content">
            <view class="data">
                <text>{{val}}</text>
            </view>
            <button type="primary" @click="comunicationOff">结束监听</button>
        </view>
    </template>

    <script>
        export default {
            data() {
                return {
                    val: 0
                }
            },
            onLoad() {
                setInterval(()=>{
                    uni.$emit('add', {
                        data: 2
                    })
                },1000)
                uni.$on('add', this.add)
            },
            methods: {
                comunicationOff() {
                      // 因传入了回调函数，只会移除本页面此回调函数的监听
                    uni.$off('add', this.add)
                },
                add(e) {
                    this.val += e.data
                }
            }
        }
    </script>

    <style>
        .content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .data {
            text-align: center;
            line-height: 40px;
            margin-top: 40px;
        }

        button {
            width: 200px;
            margin: 20px 0;
        }
    </style>