uni-app 使用 $on $emit 进行跨页信息传递，附 Vue23 写法
最近看到 ask 社区有用户提问如何正确使用 $emit $on 方法实现 uni-app 程序页面之间通信，有用户使用 $on 收不到消息，在这里尝试做个最佳实践的总结，供有相似困惑的用户参考。
谁需要阅读这篇文章#
应用级别跨页面通信，处于各种原因，决定使用 $on/$emit 进行数据传递的使用场景。
常见问题场景#
从 A 页面跳转到 B 页面，需要携带一部分复杂对象信息。在 A 页面定义 $emit 在 B 页面定义 $on，跳转页面之后，发现 B 页面接受不到事件。退回页面重新跳转就可以收到了。并且有的用户发现可以加 setTimeout 延迟之后可以使用。
这种方式并不可靠，说到底，在 A 页面发出事件的时候，B 页面还没有初始化，自然接受不到相关事件。
这里提供两种方案，供不同业务需求的用户使用。
方案一：先握手再发送#
演示代码地址 https://gitcode.net/xiurensha5731/uni-app-questions/-/tree/q/api-emit/src/pages
观察 index 页面和 about 页面。
在 index 页面，也就是 page1 页面，先注册 $on 事件，回调函数时候发送具体数据。
// 这里演示，从 index 跳转到 about 时候，传递信息
const go = () => {
uni.navigateTo({
url: "/pages/about/index?msg=hello",
});
};
onLoad(() => {
// 思路是先发注册监听、再发送信息。此时 page2
// 跳转后之后才会激活页面，才会收到 on 事件
uni.$on("page2Ready", function (data) {
console.log("page1 收到 page2 发过来的信息", data);
uni.$emit("update", { msg: "页面更新" });
});
});
onUnload(() => {
uni.$off("page2Ready");
});
在 about 页面，也就是 page2 页面。先注册事件，之后通知 page1 接受信息。
const message = ref("");
onLoad(() => {
uni.$on("update", function (data) {
console.log("page2 监听到事件来自 update ，携带参数 msg 为：" + data.msg);
message.value = data.msg;
});
uni.$emit("page2Ready", { msg: "page2 准备好了，你发送吧" });
});
onUnload(() => {
uni.$off("update");
});
完整代码参考上面链接。
方案二：使用 uni.navigateTo 的 events#
官方文档地址 https://uniapp.dcloud.net.cn/api/router.html#navigateto
搜索 events 关键字，可以定位到使用方法。
这里也提供线上看运行地址，git 地址 观察 index 页面和 about 页面。
在 index 页面，也就是 page1 页面
// 这里演示，从 index 跳转到 about 时候，传递信息
const go = () => {
uni.navigateTo({
url: "/pages/about/index?msg=hello",
events: {
// 可以接受下一页的通知
page1: function (data) {
console.log(444, data);
},
},
success: function (res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit("page2", { data: "page1 发来的信息" });
},
});
};
在 about 页面，也就是 page2 页面，这里提供 option 和 composition 两种写法。
// vue3 setup 写法
const message = ref("");
// vue3 setup 写法
onLoad(() => {
const { proxy } = getCurrentInstance();
const eventChannel = proxy.getOpenerEventChannel();
eventChannel.emit("page1", { data: "data from test page" });
// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
eventChannel.on("page2", (data) => {
console.log(222, data.data);
message.value = data.data;
});
});
// vue2 写法
// export default {
// data() {
// return { message: "" };
// },
// onLoad(option) {
// const _this = this;
// const eventChannel = this.getOpenerEventChannel();
// eventChannel.emit("page1", { data: "data from test page" });
// // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
// eventChannel.on("page2", (data) => {
// console.log(222, data.data);
// _this.message = data.data;
// });
// },
// };
技术总结#
上述两种方案，都可以使用 emit 和 on 实现页面信息传递，供遇到相似问题的用户参考。