uni-app的界面通讯思维导图

想象一下,uni-app是一个巨大的派对现场,里面有各种各样的人(组件和页面)在交流互动。但是有时候,有些人想要传递一些重要信息,却不知道该告诉谁。这时候就需要我们的主角登场了 - 全局事件通信系统!

1. uni.$emit - 派对上的大喇叭📢
   这就像是拿起一个大喇叭,向整个派对现场喊话。任何人都能听到你说的话!

   例如:

   uni.$emit('有人带来了披萨', {type: '夏威夷菠萝'});
   

2. uni.$on - 竖起耳朵听👂
   这就像是有人特别关注某个话题,竖起耳朵准备听有关的消息。

   例如:

   uni.$on('有人带来了披萨', function(data) {
     console.log('太好了!是' + data.type + '披萨!');
   });
   

3. uni.$once - 一次性注意力💥
   这就像是你只想听一次某个消息,听完就不再关注了。maybe你只想知道第一个带来披萨的人是谁。

   例如:

   uni.$once('有人带来了披萨', function(data) {
     console.log('第一个带来披萨的英雄是带来了' + data.type + '的!');
   });
   

4. uni.$off - 我要专心吃披萨了🍕
   这就像是你吃上披萨后,不想再听到有关披萨的任何消息了。

   例如:

   uni.$off('有人带来了披萨');
   

记住,这个"派对"是跨越整个应用的。无论你在哪个房间(页面),只要有人用大喇叭(uni.$emit)喊话,竖起耳朵的人(uni.$on)都能听到!

最后,别忘了在派对结束时(比如页面卸载时)把你的"耳朵"收回来(uni.$off),不然可能会听到一些你不想听的消息哦!

这个序列图展示了uni-app事件通信系统的工作流程。让我为你解释一下:

1. 应用启动后，页面B使用uni.$on开始监听"披萨到了"事件，而页面C使用uni.$once只监听一次该事件。

2. 页面A使用uni.$emit发出"披萨到了"事件，携带数据{类型: ‘夏威夷’}。

3. 事件系统通知页面B和页面C。页面C在收到通知后停止监听（因为使用的是uni.$once）。

4. 页面A再次发出"披萨到了"事件，这次是{类型: ‘意大利香肠’}。只有页面B收到通知。

5. 页面B使用uni.$off停止监听"披萨到了"事件。

6. 页面A再次发出"披萨到了"事件{类型: ‘素食’}，但由于没有监听者，这个事件被忽略。

这个图表清楚地展示了事件是如何在不同页面间传播的，以及$on、$once、$emit和$off方法是如何影响事件监听的。

你可以看到，事件系统就像一个中心枢纽，连接着所有的页面，使得它们能够进行灵活的通信。这种方式使得页面间的数据传递变得非常简单和高效。