赞
踩
在uniapp中,常见的页面传参方式有以下几种:
可以在跳转页面时,在url中添加参数,通过在目标页面的onLoad函数中的options参数获取传递的参数。示例代码如下:
在源页面中:
- uni.navigateTo({
- url: '/pages/targetPage/index?id=123&name=test'
- });
在目标页面中:
- onLoad: function(options) {
- console.log(options.id);
- console.log(options.name);
- }
可以在源页面设置一个state,然后在目标页面中获取该state的值。示例代码如下:
在源页面中:
- this.$store.state.id = 123;
- this.$store.state.name = 'test';
- uni.navigateTo({
- url: '/pages/targetPage/index'
- });
在目标页面中:
- computed: {
- id: function() {
- return this.$store.state.id;
- },
- name: function() {
- return this.$store.state.name;
- }
- }
可以在源页面使用uni对象的navigateTo方法传参,在目标页面中使用uni对象的getOpenerEventChannel方法获取传递的参数。示例代码如下:
在源页面中:
- uni.navigateTo({
- url: '/pages/targetPage/index',
- success: function(res) {
- var channel = uni.getOpenerEventChannel();
- channel.emit('passData', {id: 123, name: 'test'});
- }
- });
在目标页面中:
- onLoad: function() {
- var _this = this;
- var channel = uni.getOpenerEventChannel();
- channel.on('passData', function(data) {
- _this.id = data.id;
- _this.name = data.name;
- });
- }
其中,emit方法用于向目标页面传递数据,on方法用于监听由emit方法传递过来的数据。
赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。