uni-app 支付宝小程序 Vue ctx.emit 方式报错（TypeError: Cannot read property 'vnode' of undefined）

uni-app 支付宝小程序 Vue ctx.emit 方式报错（TypeError: Cannot read property ‘vnode’ of undefined）

示例代码：

<template>  
    <view class="test">  

    </view>  
</template>  

<script>  
    import { defineComponent } from 'vue';  
    export default defineComponent({  
        setup(props,ctx){  
            ctx.emit('change',12345)  
        }  
    })  
</script>  

<style>  
</style>

操作步骤：

开发个个组件 并引用 触发 emit 事件并传参

预期结果：

控制台打印12345

实际结果：

TypeError: Cannot read property ‘vnode’ of undefined

bug描述：

Vue3 开发模式下 uni 支付宝小程序端 ctx.emit(‘随便写’,这里只要有参数 就 报错 vnode 找不到)

信息类别 信息内容
产品分类 uniapp/小程序/阿里
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 windows10
HBuilderX类型 正式
HBuilderX版本号 3.2.16
第三方开发者工具版本号 2.5.6
基础库版本号 2.7.6
项目创建方式 HBuilderX


更多关于uni-app 支付宝小程序 Vue ctx.emit 方式报错（TypeError: Cannot read property 'vnode' of undefined）的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

该问题已修复，更新至HBuilderX Alpha最新版 https://github.com/dcloudio/uni-app/issues/3053

更多关于uni-app 支付宝小程序 Vue ctx.emit 方式报错（TypeError: Cannot read property 'vnode' of undefined）的实战教程也可以访问 https://www.itying.com/category-93-b0.html


嗯 请问什么时候发版呢？

这个错误是因为在支付宝小程序环境中，Vue 3 的 setup 函数第二个参数 ctx 的 emit 方法在传递参数时存在兼容性问题。支付宝小程序平台对 Vue 3 的 emit 支持不完整，导致传递参数时触发内部错误。

解决方案：

  1. 使用 defineEmits 替代 ctx.emit（推荐）
    在 Vue 3 中，应优先使用 defineEmits 声明事件，通过其返回的函数触发事件：

    import { defineComponent, defineEmits } from 'vue';
export default defineComponent({
  setup() {
    const emit = defineEmits(['change']);
    emit('change', 12345); // 正常触发
    return {};
  }
});

  2. 检查组件调用方式
    确保父组件通过 v-on 或 @ 监听了子组件声明的事件：

    <!-- 父组件 -->
<child-component [@change](/user/change)="handleChange" />

  3. 临时兼容处理
    如果仍需要 ctx 参数，可尝试延迟调用或包裹 setTimeout（非推荐方案，仅作临时规避）：

    setTimeout(() => {
  ctx.emit('change', 12345);
}, 0);
回到顶部