uni-app页面通讯的基本使用
概要
本文主要介绍uni-app页面通讯的基本使用
页面间通讯
–方式一
- url查询字符串和EventChannel
直接在url后面通过查询字符串的方式拼接
✓ 如url查询字符串出现特殊字符等格式,需编码
uni.navigateTo({
url: '/pages/index/index?id="1"'
});
◼ EventChannel 对象的获取方式
Options语法:this.getOpenerEventChannel()
Composition语法:getCurrentInstance().proxy. getOpenerEventChannel()
- 正向传递数据
// demo页面
uni.navigateTo({
url: '/pages/index/index',
success: function(res) {
// 通过eventChannel向被打开页面传送数据
// 向index传递数据
res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'data from starter page' })
}
});
//index页面
onLoad(options) {
const eventChannel = this.getOpenerEventChannel();
// 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据
eventChannel.on('acceptDataFromOpenerPage', function(data) {
console.log(data)
})
}
- 当demo页面跳转到index页面时,index给demo页面传递数据
- 反向传递数据
// demo页面
uni.navigateTo({
url: '/pages/index/index?id="1"',
events: {
// 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
acceptDataFromOpenedPage: function(data) {
console.log(data)
}
}
});
// index页面
onLoad(options) {
const app = getApp()
console.log(options.id);
const eventChannel = this.getOpenerEventChannel();
// 向index页面发出数据,第一个参数是事件监听器名字
eventChannel.emit('acceptDataFromOpenedPage', {data: 'data from test page'});
}
– 方式二
◼ 方式二:事件总线
uni.$emit( eventName, OBJECT ) 触发全局的自定义事件。
uni.$on( eventName, callback )监听全局的自定义事件。由 uni.$emit 触发。
uni.$once( eventName, callback )只监听一次全局的自定义事件。由 uni.$emit 触发
uni.$off( eventName, callback )
移除全局自定义事件监听器。
✓ 如果没有提供参数,则移除所有的事件监听器;
◼ 注意事项:
需先监听,再触发事件,比如:你在A界面触发,然后跳转到B页面后才监听是不行的。
通常on 和 off 是同时使用,可以避免多次重复监听
适合页面返回传递参数、适合跨组件通讯,不适合界面跳转传递参数
- 只能用来反向传递数据
- 当demo页面跳转到index页面时,index给demo页面传递数据
// demo页面
// 页面的生命周期
onLoad(options) {
// 监听触发的全局事件
uni.$on('index触发', this.acceptData)
},
onUnload(){
// 移除事件监听
uni.$off('index触发', this.acceptData)
},
methods: {
acceptData(value){
console.log(value);
}
}
// index页面
back(){
uni.navigateBack({
delta: 1,
});
// 触发一个全局事件,让demo页面监听
uni.$emit('index触发', {
data: { name: 'wuu' }
})
}
小结
本文主要介绍uni-app页面通讯的基本使用
由于作者水平有限
如果对本文有任何疑问可以私信或者评论区发表你的看法
本文如果对你有帮助,麻烦点个赞和收藏方便回看,求关注 谢谢
原文地址:https://blog.csdn.net/CssHero/article/details/136177960
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!