目录
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() {
// 请求数据接口
... ...
}
}
最后
感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！