温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

微信小程序中怎么实现子向父传参

发布时间:2021-10-17 12:53:51 来源:亿速云 阅读:199 作者:小新 栏目:移动开发

小编给大家分享一下微信小程序中怎么实现子向父传参,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

微信小程序子页面如何向父页面传递参数

有时候我们在做微信小程序项目的时候,会遇到如下的情况:有一个列表页,页面有一个筛选条件,点击之后跳转页面,进行条件的选择,选择完之后返回到列表页,根据筛选的条件进行数据的查询。一般这种情况更多的时候,我们看到的都是通过弹框形式来进行筛选条件进行处理的。那如果我们就想要跳转页面的这种交互方式,我们如何从子页面把参数传递到父页面呢?

问题

  • wx.navigateBack 无法携带参数,子页面无法向父页面传递参数。

子页面操作父页面数据

这个地方留意一下,我们是说的子页面操作父页面的数据。

在官方文档上有一个getCurrentPages的API(官网描述如下):

PageObject[] getCurrentPages()获取当前页面栈。数组中第一个元素为首页,最后一个元素为当前页面。

  • 不要尝试修改页面栈,会导致路由以及页面状态错误。

  • 不要在 App.onLaunch 的时候调用 getCurrentPages(),此时 page 还没有生成。

通过getCurrentPages这个API,我们可以获取到页面栈的数据,所以就可以获取到指定的页面,在子页面通过修改父页面数据的方式,我们就可以实现子页面向父页面传参的功能。

const pages = getCurrentPages();
const gotoPage = pages[pages.length - 1];

所以pages[pages.length - 1]就为当前页面,父页面就为pages[pages.length - 2],依次类推,我们可以获取到其他的祖先页面。

然后再使用 setData 方法 gotoPage.setData({xxx: ''})来修改设置父页面的数据,从而达到子页面向父页面传递参数的目的。之后再通过 wx.navigateBack 进行页面返回即可。

其他解决方式

  • 组件

  • 弹框

如我们文章开头提到,如果是需要从子页面向父页面传递参数,那我们可以通过弹框的形式显示内容,选择完相应的数据之后,隐藏当前的弹框或者组件。

以上是“微信小程序中怎么实现子向父传参”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI