uni-app界面之间的传参

短命女 2023-03-04 06:38 145阅读 0赞

**这里的class样式使用的是uni.css的ui库**

## *template* ##

## *data* ##

data() { 
    	return { 
    		list: ["我是第一个", "我是第二个", "我是第三个"]
    	}
    },

## *methods* ##

methods: { 
    	navigateTo(e) { 
    		console.log(e);		//打印当前点击的参数
    		uni.navigateTo({ 
    				url: '/pages/example/details?data=' + e + ''	//界面传值
    		})
    	},
    }

**第二个界面接收上一个界面传过来的值**

data() { 
    	return { 
    		data: ""
    	}
    },
    onLoad(e) { 	//接收上一个界面传过来的值
    	if (e.data) { 
    		this.data = e.data;
    	}
    },

如果看不懂，那咱来点实际的直接上图：  
index.vue  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NTQ5OA_size_16_color_FFFFFF_t_70]  
details.vue  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NTQ5OA_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NTQ5OA_size_16_color_FFFFFF_t_70]: /images/20230208/64ff2470605b4b0fbd2f2320cadf153c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NTQ5OA_size_16_color_FFFFFF_t_70 1]: /images/20230208/41c43ef1ea0e4b719409fde4c815dfad.png