标签:
在uni-app中,使用uni.$emit
和uni.$on
进行跨页面通信是可行的。当在父页面中使用uni.$emit('event-name')
触发一个事件时,如果注册了对应的uni.$on('event-name', callback)
,则子页面中的回调函数将被执行。
请注意以下几点:
-
确保在子页面中正确注册了对应的
uni.$on
监听事件。通常在子页面的onLoad
或onShow
生命周期函数中进行注册。 -
子页面必须在父页面调用
uni.navigateTo
或uni.redirectTo
等跳转方法打开,并且不能使用uni.switchTab
,因为uni.switchTab
打开的页面是单独的Tab页面,无法接收到跨页面事件。
以下是一个示例代码:
父页面
<template>
<div>
<button @click="emitEvent">触发事件</button>
</div>
</template>
<script>
export default {
methods: {
emitEvent() {
uni.$emit('test-event');
}
}
}
</script>
Vue
在子页面中使用uni.$on
监听事件:
子页面
<template>
<div>
<p>子页面</p>
</div>
</template>
<script>
export default {
mounted() {
uni.$on('test-event', this.handleEvent);
},
destroyed() {
uni.$off('test-event', this.handleEvent);
},
methods: {
handleEvent() {
console.log('事件被触发');
}
}
}
</script>
Vue
在上述代码中,点击父页面的按钮将会触发uni.$emit('test-event')
,然后在子页面中监听到了该事件,进而执行handleEvent
方法并打印了消息。
通过以上设置,当进入子页面后,uni.$on
会注册事件的回调函数,并且在父页面中调用uni.$emit
触发事件时,子页面的回调函数会被执行。
希望对你有所帮助!
标签: 来源:
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。