uniapp 页面通信

发表于 更新于 分类于

uni.$emit

  • 如果没有提供参数，则移除所有的事件监听器
  • 如果只提供了事件，则移除该事件所有的监听器
  • 如果同时提供了事件与回调，则只移除这个回调的监听器
  • 提供的回调必须跟$on 的回调为同一个才能移除这个回调的监听器

发送

1
uni.$emit("update", { msg: "页面更新" });

监听

1
2
3
uni.$on("update", function (data) {
  console.log("监听到事件来自 update ，携带参数 msg 为：" + data.msg);
});

仅监听一次

1
2
3
uni.$once("update", function (data) {
  console.log("监听到事件来自 update ，携带参数 msg 为：" + data.msg);
});

注销监听

1
uni.$off([eventName, callback]);

eventChannel

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
uni.navigateTo({
  url: "pages/test?id=1",
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function (data) {
      console.log(data);
    },
    someEvent: function (data) {
      console.log(data);
    }
    // ...
  },
  success: function (res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit("acceptDataFromOpenerPage", { data: "test" });
  }
});

export default {
  // uni.navigateTo 目标页面 pages/test.vue
  onLoad: function (option) {
    console.log(option.query);
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.emit("acceptDataFromOpenedPage", { data: "test" });
    eventChannel.emit("someEvent", { data: "test" });
    // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on("acceptDataFromOpenerPage", function (data) {
      console.log(data);
    });
  }
};