在移动端应用中，表单设置组件往往作为独立的页面层级存在，以实现如时间选择等复杂功能。当用户在该组件页面内选定特定时间后，如何将这一选择结果高效、有序地传递回原页面，成为一个颇具挑战性的任务。尽管可以借助Vuex进行全局状态管理以共享数据，但随着项目规模扩大和业务逻辑复杂化，直接依赖Vuex可能导致数据流难以追踪与维护。我们巧妙地运用uni.$emit事件触发机制，封装了一种方法，旨在实现选择结果的优雅传递，既保持代码的清晰性，又确保了数据流动的可控性。以下是对该方法的实现：

1、封装公共js方法：

function generateEmitKey() {return `ant${new Date().getTime()}${Math.floor(Math.random() * 150)}`;
}/*** 跳转组件/页面选择数据，并携带数据返回接收处理方法* @param {Object} data* @returns*/
function commonBackEvent(data = {}) {const { path, query = {}} = dataif (!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)}})
}

2、原页面使用该方法进行跳转，并接收数据：

const data = await commonBackEvent({path: 'xxxxxx',query: {date,}
})

3、组件页面选择时间后返回并emit触发：

this.$Router.back();
uni.$emit(this.$Route.query.parameter, 'xxx-xxx-xxx');