赞
踩
在移动端应用中,表单设置组件往往作为独立的页面层级存在,以实现如时间选择等复杂功能。当用户在该组件页面内选定特定时间后,如何将这一选择结果高效、有序地传递回原页面,成为一个颇具挑战性的任务。尽管可以借助Vuex进行全局状态管理以共享数据,但随着项目规模扩大和业务逻辑复杂化,直接依赖Vuex可能导致数据流难以追踪与维护。我们巧妙地运用uni.$emit事件触发机制,封装了一种方法,旨在实现选择结果的优雅传递,既保持代码的清晰性,又确保了数据流动的可控性。以下是对该方法的实现:
- function generateEmitKey() {
- return `ant${new Date().getTime()}${Math.floor(Math.random() * 150)}`;
- }
-
- /**
- * 跳转组件/页面选择数据,并携带数据返回接收处理方法
- * @param {Object} data
- * @returns
- */
- function commonBackEvent(data = {}) {
- const { path, query = {}} = data
- if (!path) throw new Error('error: path is not undefined')
- return new Promise((resolve, reject) => {
- try {
- const parameter = query?.parameter || generateEmitKey()
- uni.$off(parameter)
- uni.$on(parameter, data => {
- setTimeout(() => {
- resolve(data)
- }, 500)
- })
- router.push({
- path,
- query: {
- ...query,
- parameter
- }
- });
- } catch (error) {
- reject(error)
- }
- })
- }
- const data = await commonBackEvent({
- path: 'xxxxxx',
- query: {
- date,
- }
- })
- this.$Router.back();
- uni.$emit(this.$Route.query.parameter, 'xxx-xxx-xxx');
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。