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

uniapp全局事件，也就是说，不相邻的，不是父子组件，也可以传递参数。
一个组件，传递项目内所有文件其中一个里面内，可以接受到参数。

一、传参参数

传送参数页面

<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>

接受参数页面

<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>

二、调用方法

详情页(detail.vue)

点击返回列表页面，刷新列表方法

<view @click="submitFunc">
	点击返回列表页面，并且刷新列表接口
</view>

methods:{
	back() {
		uni.$emit('refreshData');
		uni.navigateBack({
			delta: 1
		})
	},
	submitFunc() {
		// 按钮点击返回，调用back()方法
		this.back();
	}
}

列表页(list.vue)

onLoad() {
	// 正常进入该页面的获取数据
	this.getData();
	// 从详情页返回该页面的获取数据
	uni.$on('refreshData',() => {
		// 调用列表接口
		this.getData();
	})
},
methods:{
	// 列表接口
	getData() {
		// 请求数据接口
		... ...
	}
}

三、调用方法

改为uni改为this调用$emit和 $ on

详情页(detail.vue)

点击返回列表页面，刷新列表方法

<view @click="submitFunc">
	点击返回列表页面，并且刷新列表接口
</view>

methods:{
	back() {
		this.$emit('refreshData');
		uni.navigateBack({
			delta: 1
		})
	},
	submitFunc() {
		// 按钮点击返回，调用back()方法
		this.back();
	}
}

列表页(list.vue)

onLoad() {
	// 正常进入该页面的获取数据
	this.getData();
	// 从详情页返回该页面的获取数据
	this.$on('refreshData',() => {
		// 调用列表接口
		this.getData();
	})
},
methods:{
	// 列表接口
	getData() {
		// 请求数据接口
		... ...
	}
}

最后

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