uni-app中的页面通讯$on与$emit

悠悠 2022-11-13 14:27 239阅读 0赞

在页面与页面之间通讯时，很多人会直接选择使用在navigato的时候直接拼接字符串来传递。可是当需要传依个比较多数据的的对象的时候这个方式就不是很管用了，为此uniapp给我们提供了页面与页面之间通讯的极为简便的方法。

比如我在下订单页面的时候需要用户选择一个地址去配送，因此我们需要点击之后跳转到选择收货地址页面。而在选择完了收货地址以后需要关闭那个页面返回该订单页面。因此在该订单页面我们需要开启监听用户选择地址的事件。注意在订单页面卸载的时候也要记得关闭该监听。  
下面为订单页面的代码：

onLoad() { 
    			
    	//开启监听选择收货地址事件
    	uni.$on('choosePath',(res)=>{ 
    		this.path = res;
    	})
    },
    		
    //页面卸载
    	onUnload() { 
    		//关闭监听选择收货地址事件
    	uni.$off('choosePath',()=>{ 
    		console.log('关闭监听选择收货地址');
    	})
    },
    	
    methods: { 
    	openPathList(){ 
    	    uni.navigateTo({ 
    	        url: '../user-path-list/user-path-list?type=choose'
    		});
    	},
    }

下面是选择地址的页面：

onLoad(option) { 
    	if(option.type==='choose'){ 
    		this.isChoose = true
    	}
    },
     
    methods:{ 
        //选择收获地址
    	choosePath(item){ 
    		if(this.isChoose){ 
    			//通知订单页面修改地址
    			uni.$emit('choosePath',item)
    			//关闭当前页面
    			uni.navigateBack({ 
    				delta: 1
    			});
    		}
    	}
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，239人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue与组件的通讯（props与$emit）

1、父页面给组件传递数据(props) 父页面 <template> <view> <a-chlid :titleData="titleDa

╰+哭是因爲堅強的太久メ/ 2023年01月23日 13:56/ 0 赞/ 193 阅读

相关使用uni.$emit()和uni.$on()进行页面间通讯

监听事件: // 页面a onLoad(){ // 监听事件 uni.$on('upData',(e)=>{

蔚落/ 2022年12月29日 09:08/ 0 赞/ 217 阅读

相关 vue的$emit与$on、$off

vue中，父组件（或者是页面）传数据给子组件用props，这个比较简单 a.vue <child :data-props="dataProps"></child>

Love The Way You Lie/ 2022年12月29日 02:14/ 0 赞/ 166 阅读

相关 uni-app中的页面通讯$on与$emit

在页面与页面之间通讯时，很多人会直接选择使用在navigato的时候直接拼接字符串来传递。可是当需要传依个比较多数据的的对象的时候这个方式就不是很管用了，为此uniapp给我们

悠悠/ 2022年11月13日 14:27/ 0 赞/ 240 阅读

相关 uniapp开发uni.$emit()、uni.$on无法触发

在开发过程中有时需要多次跳转同一个页面，此时只有一个uni.$on生效解决：用getCurrentPages()获取页面栈实例，调用上一个页面的函数注：uniapp

╰+攻爆jí腚メ/ 2022年09月11日 01:17/ 0 赞/ 497 阅读

相关 uniapp全局监听，页面修改页面 uni.$emit(),uni.on(),uni.off()

1.全局监听，页面修改页面 uni.$emit(),uni.on(),uni.off() 任一页面 <template> <view>

向右看齐/ 2022年09月02日 04:18/ 0 赞/ 536 阅读

相关 21$emit与$on

e m i t 与 emit与 emit与on $on $emit应用场景 1. 子组件中触发在父组件中定义的方法 <!DOCTYPE h

深藏阁楼爱情的钟/ 2022年02月05日 13:39/ 0 赞/ 270 阅读

相关 uniapp中的组件通讯（$emit和$on）

效果图： ![20210307003902909.gif][] 实现代码： ![20210307003920802.png][] bus.js imp

川长思鸟来/ 2021年07月25日 15:29/ 0 赞/ 1454 阅读

相关 uniapp 页面通信uni.$emit、eventChannel

发送 uni.$emit('update',{msg:'页面更新'}) 监听 uni.$on('update',functi

ゝ一纸荒年。/ 2021年07月24日 15:12/ 0 赞/ 2231 阅读

相关 vue中$emit与$on

`var Event = new Vue();` 相当于又`new`了一个`vue`实例，`Event`中含有`vue`的全部方法； `Event.$emit('msg',t

港控/mmm°/ 2021年06月26日 16:06/ 0 赞/ 500 阅读