关于vue返回上个页面如何携带参数的方法

本文介绍了一种在Vue项目中实现跨组件通信的方法:通过创建一个全局的事件总线来传递和接收数据。首先建立一个事件监听器实例,接着在需要发送数据的组件中使用emit方法发送数据,在接收数据的组件中使用on方法监听并处理接收到的数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1,我们可以在项目中新建一个空实例对象,作为中央数据总线,用来传递和接收数据,具体如下
新建一个文件夹

  1. eventListener文件夹在src中,然后新建js文件,命名为listener(可以随意命名)
    内容如下
    import Vue from ‘vue’
    var eventLIister = new Vue({});
    export default eventLIister
    2)在要传递数据的页面
    import listener from ‘@/eventListener/listener .js’
    返回函数(点击信息列表之后触发的函数)
    returnBack(index,map){
    listener.emit(′backHis′,map[index])this.emit('backHis',map[index]) this.emit(backHis,map[index])this.router.go(-1)
    }
    //这边传递的数组map也可以直接把接收后台数据的那个传过去,这边可以通过id或者下标都可以
    3)在页面上因为带参不知道是哪一个所以该函数需要传下标和map
    @click=’ returnBack(index,map)’
    4)因为map是我自己申明的变量,消息列表的数据是从后台拿取的,所以可以拿一个值来接收,在用map来把拿到的数据映射出来,然后点击哪个返回的就是对应的数据
    2,在要接收数据的页面如下写
    import listener from ‘@/eventListener/listener .js’
    created(){ //因为我这边一返回就要拿到数据,on里面的backHis就是key,后面的data就是传过来的数据//然后在根据页面所需要的给数据进行赋值渲染到页面listener.on里面的backHis就是key,后面的data就是传过来的数据 //然后在根据页面所需要的给数据进行赋值渲染到页面 listener.onbackHiskeydata//listener.on(‘backHis’,function(data){
    console.log(data)
    })
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值