uni-app的官方api uni.$on

场景: 微信小程序两个页面甚至多个页面之间,可能共用一个参数或者需要相互传递使用参数。例如页面A点击按钮,需要把A页面的item数据,赋值给页面B的formData,但是页面A只是传递数据给B,却不跳转到B。导致无法通过页面路径跳转传递参数,此时最好的办法就是使用页面通讯。

1.A页面:uni.$emit传递数据data,

并且会触发uni.$on同名事件,进行接收数据

methods:{
    //获取数据
	getData(){
	        let item={name:'张三',age:18}
			//传递数据给 同一个页面通讯方法
			uni.$emit('setData',item)
	}
}

2.页面B:需要事先注册好同名的uni.$on页面通讯方法,用来接收数据(小程序页面推荐在onLoad内注册,正常组件只能在mounted内注册),监听全局的自定义事件。

事件可以由 uni.$emit 触发,回调函数会接收所有传入事件触发函数的额外参数。

注意:卸不卸载取决于你自己需求;如果卸载,后期不触发onLoad就无法再注册uni.$on事件,也就无法继续监听传递接收处理数据了

onLoad() {
	//开启监听接受传递的数据
	uni.$on('setData',(res)=>{
	    console.log('接受的数据:',res)
		this.formData = res
		this.name = res.name
		this.age = res.age
		
		//还可以在这个里面执行methods方法
		this.num()
	})
},
		
//--------------------------注意:卸不卸载取决于你自己需求;如果卸载,后期不触发onLoad就无法再注册uni.$on事件,也就无法继续监听传递接收处理数据了-------------
onUnload() {
	//卸载关闭监听设置数据事件
	uni.$off('setData',()=>{
		console.log('关闭监听选择收货地址');
	})
},
	
methods: {
	num(){
	    console.log(1)
	},
}	

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐