uni-app 安卓端 NVue 页面 subnvue 使用 uni.$on 监听时 跳转其他页面再回来 无法触发 uni.$on

发布于 1周前 作者 ionicwang 来自 Uni-App

uni-app 安卓端 NVue 页面 subnvue 使用 uni.$on 监听时 跳转其他页面再回来 无法触发 uni.$on

操作步骤：

  • nvue 页面作为 tabbar 页面， 其中有一个 subnvue 弹框， 在tabbar 页面跳转后 在返回tabbar 页面，使用 $emit 就不会触发$on

预期结果：

  • $on 应该可以收到消息

实际结果：

  • $on 未收到消息

bug描述：

video.nvue  
uni.getSubNVueById("comment").show("none", 0, () => {  
        uni.$emit("showComment", {  
          type: "refresh",  
          id: this.videoList[this.index].id  
        });  
        console.log("发送showComment 事件", this.index);  
      });

comment.nvue  
uni.$on("showComment", (item) => {  
      console.log(item, "收到 showComment");  
      this.showComment(item);  
    });

Harmonyos Next教程
1 回复

在uni-app中，NVue页面与subnvue页面之间的通信确实存在一些特殊之处，尤其是在处理事件监听与页面跳转时。针对你提到的在安卓端NVue页面的subnvue中使用uni.$on监听事件，在跳转其他页面后再返回无法触发的问题，我们可以通过一些代码示例来展示如何更稳健地管理事件监听。

首先，需要明确的是，uni.$on、uni.$off和uni.$emit是uni-app提供的事件中心API，用于跨组件、跨页面的通信。但在NVue和subnvue中，由于渲染引擎的差异（NVue使用Weex引擎），这些API的行为可能与H5页面有所不同。

以下是一个简化的示例，展示如何在NVue页面和subnvue页面之间设置和监听事件，同时确保在页面跳转后仍能正确触发事件。

NVue页面 (main.nvue):

<template>
  <div>
    <sub-nvue ref="subnvue"></sub-nvue>
    <button @click="navigateToOtherPage">Go to Other Page</button>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$refs.subnvue.$on('custom-event', this.handleEvent);
  },
  beforeDestroy() {
    this.$refs.subnvue.$off('custom-event', this.handleEvent);
  },
  methods: {
    handleEvent(data) {
      console.log('Event received:', data);
    },
    navigateToOtherPage() {
      uni.navigateTo({
        url: '/pages/other/other'
      });
    }
  }
}
</script>

SubNVue页面 (subnvue.nvue):

<template>
  <div>
    <button @click="triggerEvent">Trigger Event</button>
  </div>
</template>

<script>
export default {
  methods: {
    triggerEvent() {
      this.$emit('custom-event', { message: 'Hello from subnvue' });
    }
  }
}
</script>

在这个示例中，我们在NVue页面的mounted生命周期钩子中注册了事件监听器，并在beforeDestroy钩子中移除监听器。这样做可以确保即使页面被销毁（例如，在返回时触发页面重建），事件监听器也能被正确管理。

此外，值得注意的是，NVue页面的生命周期与H5页面有所不同，特别是在处理页面返回和重建时。因此，确保在适当的生命周期钩子中注册和移除事件监听器是至关重要的。

如果问题依旧存在，可能需要进一步检查页面跳转逻辑、事件监听器的注册与移除是否正确执行，或者考虑使用其他通信机制，如全局状态管理（如Vuex）或本地存储来传递数据。

回到顶部