uniapp全局事件uni.$on,可以不相邻的组件之间传递参数

目录

uniapp全局事件,也就是说,不相邻的,不是父子组件,也可以传递参数。

一个组件,传递项目内所有文件其中一个里面内,可以接受到参数。

传送参数页面

html 复制代码
<template>
	<view class="box">
		<button type="default" @click="goChuangcan(521)"></button>
	</view>
</template>

<script>
	export default{
		methods:{
			// 传送参数
			goChuangcan(e){
				uni.$emit('citySelectData',e)
			}
		}
	}
</script>

<style>
	.box{
		background-color: pink;
	}
</style>

接受参数页面

html 复制代码
<template>
	<view class="box">
		接受到数据啦,展示在页面上啦:-------	<text style="color: #FFF;">{{dataLit}}</text>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				dataLit:''
			}
		}
		mounted() {
			// 注意这里是细节,一定要加	var that = this		这个
			var that = this
			uni.$on('citySelectData',function(data){
				that.dataLit = data
				console.log('接受到数据啦:',data)
			})
		}
	}
</script>

<style>
	.box{
		background-color: pink;
	}
</style>

最后

感觉文章好的话记得点个心心和关注和收藏,有错的地方麻烦指正一下,如果需要转载,请标明出处,多谢!!!

相关推荐
我是伪码农3 小时前
Vue 1.23
前端·javascript·vue.js
wqwqweee3 小时前
Flutter for OpenHarmony 看书管理记录App实战:搜索功能实现
开发语言·javascript·python·flutter·harmonyos
HIT_Weston5 小时前
107、【Ubuntu】【Hugo】搭建私人博客:模糊搜索 Fuse.js(三)
linux·javascript·ubuntu
henujolly8 小时前
ethers.js读取合约信息
开发语言·javascript·区块链
毕设源码-郭学长9 小时前
【开题答辩全过程】以 基于Web的高校课程目标达成度系统设计与实现为例,包含答辩的问题和答案
前端
wuhen_n9 小时前
高阶函数与泛型函数的类型体操
前端·javascript·typescript
POLITE310 小时前
Leetcode 437. 路径总和 III (Day 16)JavaScript
javascript·算法·leetcode
1登峰造极10 小时前
uniapp 运行安卓报错reportJSException >>>> exception function:createInstanceContext, exception:white screen
android·java·uni-app
難釋懷10 小时前
解决状态登录刷新问题
java·开发语言·javascript
ヤ鬧鬧o.10 小时前
多彩背景切换演示
前端·css·html·html5