uni-app 通过分享朋友的卡片进入小程序 主页面引入子组件 主页面通过uni.$emit传输的值 子组件通过uni.$on收不到

在 uni-app 中，通过 uni.$emit 和 uni.$on 进行跨页面或组件的通信时，可能会遇到子组件无法接收到主页面通过 uni.$emit 发送的消息的情况。以下是一些可能的原因及解决办法：

1. 事件监听时机问题

子组件需要在 uni.$emit 执行之前就已经注册了事件监听器。如果子组件的 uni.$on 在 uni.$emit 之后才执行，那么它将无法接收到事件。

解决办法： 确保子组件在 uni.$emit 之前已经注册了事件监听器。可以在子组件的 created 或 mounted 生命周期钩子中注册事件监听器。

// 子组件
export default {
  created() {
    uni.$on('myEvent', (data) => {
      console.log('接收到数据:', data);
    });
  },
  beforeDestroy() {
    uni.$off('myEvent'); // 防止内存泄漏
  }
};

2. 事件名称不一致

uni.$emit 和 uni.$on 的事件名称必须完全一致，包括大小写。

解决办法： 确保 uni.$emit 和 uni.$on 使用的事件名称完全相同。

// 主页面
uni.$emit('myEvent', { message: 'Hello World' });

// 子组件
uni.$on('myEvent', (data) => {
  console.log('接收到数据:', data);
});

3. 子组件未正确挂载

如果子组件未正确挂载或被销毁，那么它可能无法接收到事件。

解决办法： 确保子组件在事件触发时已经挂载并且没有被销毁。

4. 作用域问题

uni.$emit 和 uni.$on 是全局事件，因此它们可以在任何页面或组件中使用。但如果子组件和主页面不在同一个页面或组件树中，可能会导致事件无法正常传递。

解决办法： 确保子组件和主页面在同一个页面或组件树中。

5. 生命周期问题

如果 uni.$emit 在子组件的生命周期钩子之前执行，子组件将无法接收到事件。

解决办法： 可以将 uni.$emit 放在 mounted 或 onLoad 等生命周期钩子中，确保子组件已经挂载。

6. 事件未正确销毁

如果在组件销毁时没有正确移除事件监听器，可能会导致内存泄漏。

解决办法： 在子组件的 beforeDestroy 或 onUnload 生命周期钩子中移除事件监听器。

// 子组件
export default {
  created() {
    uni.$on('myEvent', this.handleEvent);
  },
  beforeDestroy() {
    uni.$off('myEvent', this.handleEvent);
  },
  methods: {
    handleEvent(data) {
      console.log('接收到数据:', data);
    }
  }
};

7. 小程序分享卡片进入时的生命周期问题

如果通过分享卡片进入小程序，可能会遇到生命周期钩子执行顺序的问题，导致 uni.$on 未及时注册。

解决办法： 可以在 onLoad 或 onShow 中注册事件监听器，确保在页面显示时已经注册。

// 子组件
export default {
  onShow() {
    uni.$on('myEvent', this.handleEvent);
  },
  onHide() {
    uni.$off('myEvent', this.handleEvent);
  },
  methods: {
    handleEvent(data) {
      console.log('接收到数据:', data);
    }
  }
};