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