uniapp页面之间通信、传参、传值方法(父→传→子,子→传→父);获取被打开页面的数据→传→当前页面;当前页面的数据→传→被打开页面

简介: uniapp页面之间通信、传参、传值方法(父→传→子,子→传→父);获取被打开页面的数据→传→当前页面;当前页面的数据→传→被打开页面


情况1:父页面→传参到→子页面→传参到→父页面

父页面

uni.navigateTo({
  url: '子页面路径?参数名1=1&参数名2=JSON.stringify(对象2)',
});
//如果要传很长的参数或对象,建议使用events、eventChannel(url有长度限制,太长的字符串会传递失败,可改用窗体通信、全局变量,另外参数中出现空格等特殊字符时需要对参数进行编码encodeURIComponent)----------------------------------------
uni.navigateTo({
  url: '被打开页面路径',
  events: {
    // 被打开页面的数据→传→当前页面
    fromOpenedPage:d=>{
      console.log(d);
    },
    fromOpenedPage2:d=>{
      console.log(d);
    },
    ...
  },
  success:d=>{
    // 当前页面的数据→传→被打开页面
    d.eventChannel.emit('toOpenedPage', '传给被打开页面的数据');
  }
})

子页面

export default {
  onLoad(d) {
    console.log(d.参数名1);//输出 1
    console.log(JSON.parse(d.参数名2));//输出 对象2
  }
    //获取很长的url参数采用以下方法----------------------------------------
    onLoad(d) {   
        this.getOpenerEventChannel().emit('fromOpenedPage', '传回给上次打开的页面');
        this.getOpenerEventChannel().emit('fromOpenedPage2', '传回给上次打开的页面2');
        // 监听toOpenedPage事件,获取上一页面通过eventChannel传送到当前页面的数据
        this.getOpenerEventChannel().on('toOpenedPage', d=>{
            console.log(d);
        })
    }
}

情况2:子页面→传参到→父页面

子页面

uni.$emit('传参事件名', {
    参数名1: 1,
    参数名2: {a:1,b:2}
});

父页面

onLoad(){  
    // 监听事件  
    uni.$on('传参事件名',d=>{  
        console.log(d);//{参数名1: 1,参数名2: {a:1,b:2}}
    })  
},  
onUnload() {  
    // 移除监听事件  
    uni.$off('传参事件名');  
},


相关文章
|
5月前
|
数据处理 开发者
【Uniapp 专栏】提升 Uniapp 开发效率的进阶方法
【5月更文挑战第17天】提升Uniapp开发效率的关键包括组件化、模板语法、数据处理和代码组织。通过封装组件如通用按钮,利用列表渲染生成多个元素,使用计算属性和方法处理复杂逻辑,以及采用预处理器如Sass编写样式。此外,良好的代码结构和使用开发者工具进行调试也是重要环节。掌握这些进阶技巧能帮助开发者更高效地构建高质量应用。
97 2
【Uniapp 专栏】提升 Uniapp 开发效率的进阶方法
|
3月前
|
前端开发
uniapp 数据父传子
在uni-app中,父组件向子组件传递数据主要通过属性绑定的方式实现。这里提供一个简单的示例来说明如何进行父传子的数据传递:
35 1
uniapp 数据父传子
|
3月前
|
移动开发 前端开发 小程序
uniapp内置组件uni.navigateTo跳转后页面空白问题解决
【7月更文挑战第1天】uniapp内置组件uni.navigateTo跳转后页面空白问题解决
73 4
|
3月前
|
存储
uniapp实战 -- 个人信息维护(含选择图片 uni.chooseMedia,上传文件 uni.uploadFile,获取和更新表单数据)
uniapp实战 -- 个人信息维护(含选择图片 uni.chooseMedia,上传文件 uni.uploadFile,获取和更新表单数据)
94 2
|
3月前
|
小程序 UED
uniapp 添加分包页面,配置分包预下载
uniapp 添加分包页面,配置分包预下载
51 2
|
3月前
uniapp实战 —— 弹出层 uni-popup (含vue3子组件调父组件的方法)
uniapp实战 —— 弹出层 uni-popup (含vue3子组件调父组件的方法)
309 1
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的共享单车数据存储系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的共享单车数据存储系统附带文章源码部署视频讲解等
34 1
|
3月前
|
小程序
uniapp如何隐藏默认的页面头部导航栏,uniapp开发小程序如何隐藏默认的页面头部导航栏
uniapp如何隐藏默认的页面头部导航栏,uniapp开发小程序如何隐藏默认的页面头部导航栏
303 0
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的个人健康数据管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的个人健康数据管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
5月前
|
JavaScript 前端开发 小程序
uniapp中nvue页面如何全屏,map组件如何全屏?
uniapp中nvue页面如何全屏,map组件如何全屏?
228 3
下一篇
无影云桌面