uni-app $emit在支付宝小程序下报错

uni-app $emit在支付宝小程序下报错

# 操作步骤：
- 创建子组件，子组件中触发uni.$emit('xxx',"xxx")报错

# 预期结果：
- 父组件uni.$on('xxx',function(data){})应该获取到值

# 实际结果：
- 实际子组件触发时报错

# bug描述：
开发支付宝小程序，在自定义组件中使用uni.$emit会报错TypeError: Cannot read property ‘vnode’ of undefined
其他平台正常
没有$这个

| 开发环境 | 版本号 | 项目创建方式 |
| --- | --- | --- |
| Mac | big sur 11.6 | HBuilderX |
| HBuilderX | 3.2.8 | - |
| 第三方开发者工具 | 2.3.8 | - |
| 基础库 | 1.25.1 | - |

更多关于uni-app $emit在支付宝小程序下报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app $emit在支付宝小程序下报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在支付宝小程序中，uni.$emit 和 uni.$on 确实存在兼容性问题，主要原因是支付宝小程序环境下的 uni 对象缺少 $emit 和 $on 方法。这通常是由于支付宝小程序的基础库或框架实现与微信小程序等平台存在差异导致的。

解决方案：

  1. 使用全局事件总线替代：
    可以创建一个全局事件管理器（Event Bus）来替代 uni.$emit 和 uni.$on。例如：

    // eventBus.js
const events = {};
export default {
  $on(event, callback) {
    if (!events[event]) events[event] = [];
    events[event].push(callback);
  },
  $emit(event, data) {
    if (events[event]) {
      events[event].forEach(callback => callback(data));
    }
  },
  $off(event, callback) {
    if (events[event]) {
      events[event] = events[event].filter(cb => cb !== callback);
    }
  }
};

    在组件中引入并调用：

    import eventBus from './eventBus.js';
eventBus.$emit('xxx', 'data');

  2. 使用 Vue 的全局事件总线：
    如果项目基于 Vue，可以利用 Vue 实例作为事件总线：

    // main.js
Vue.prototype.$eventBus = new Vue();
// 子组件
this.$eventBus.$emit('xxx', 'data');
// 父组件
this.$eventBus.$on('xxx', data => {});

  3. 条件编译处理平台差异：
    使用 uni 的条件编译，在支付宝小程序中切换到其他通信方式（如父组件传参或 Vuex）：

    // #ifdef MP-ALIPAY
// 支付宝小程序的兼容代码
// #endif
回到顶部