uniapp uni.$emit uni.$on uni.$once uni.$off
佛佛ง 人气:0uni.$emit(eventName,OBJECT) | 触发全局的自定义事件。附加参数都会传给监听器回调。 |
uni.$on(eventName,callback) | 监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。 |
uni.$once(eventName,callback) | 监听全局的自定义事件。事件可以由 uni.$emit 触发，但是只触发一次，在第一次触发之后移除监听器。 |
uni.$off([eventName, callback]) | 移除全局自定义事件监听器。 |
注意事项
- uni.$emit、 uni.$on 、 uni.$once 、uni.$off 触发的事件都是 App 全局级别的，跨任意组件，页面，nvue，vue 等
- 使用时，注意及时销毁事件监听，比如，页面 onLoad 里边 uni.$on 注册监听，onUnload 里边 uni.$off 移除，或者一次性的事件，直接使用 uni.$once 监听
使用场景
进入app,是未登陆状态，需要在我的页面点击登陆，进入登陆页面进行登陆。登陆成功之后，返回到我的页面，实时显示登陆后的用户信息。
1、在我的页面，监听事件
<template>
<view class="content">
<text v-if="usnerinfo">{{usnerinfo.userName}}</text>
<button v-else @click="toLogin">去登录</button>
</view>
</template>
<script>
export default {
data() {
return {
usnerinfo: null
}
},
// 我的页面
onLoad() {
// 监听事件,使用 uni.$emit 触发事件后，对应的 uni.$on 就会监听到事件触发，在回调中去执行相关的逻辑。
uni.$on('login', (usnerinfo) => {
this.usnerinfo = usnerinfo;
})
},
onUnload() {
// 移除监听事件
uni.$off('login');
},
methods: {
toLogin() {
uni.navigateTo({
url: '/pages/a/a'
})
},
}
}
</script>因为事件监听是全局的，所以使用 uni.$on ，需要使用 uni.$off 移除全局的事件监听，避免重复监听。
2、在登录页，触发事件
<template>
<view class="content">
<view class="data" @click="doLogin">触发方法，获取用户信息</view>
</view>
</template>
<script>
export default {
data() {
return {
usnerinfo: null
}
},
// 我的页面
onLoad() {},
methods: {
doLogin() {
// 登陆页面
uni.$emit('login', {
userName: 'lzzzzzzzzzzzzzzzzzzzzz',
login: true
});
uni.navigateBack({})
}
}
}
</script>
使用 uni.$emit 触发事件后，对应的 uni.$on 就会监听到事件触发，在回调中去执行相关的逻辑。
总结
加载全部内容