微信小程序内Vue3组件defineEmits的自定义事件父组件无法监听到事件回调

微信小程序内Vue3组件defineEmits的自定义事件父组件无法监听到事件回调

开发环境 版本号 项目创建方式
Mac CLI

示例代码：

子组件 `<code>verify-smc-popup.vue</code>`

```vue
<template>  
    <view class="verify-smc-popup"></view>  
</template>  

<script setup>  
const emit = defineEmits(['success']);  

function verify(code) {  
  emit('success', { code });  
}  
</script>

父组件 <code>index.vue</code>

<template>  
<VerifySmcPopup business-type="1"  [@success](/user/success)="onVerifySuccess" />  
</template>  

<script setup>  
import VerifySmcPopup from './verify-smc-popup.vue';  

function onVerifySuccess(data) {  
  console.log('onVerifySuccess', data);  
}  
</script>

12 回复

我测试下


我刚刚跑了一个demo，父子组件通信正常触发了

试试父组件也用setup呢

用cli的 build:mp-weixin 试试，dev:mp-weixin 是好的

回复 t***@huanlong.me: 我试下

组件都使用了setup，用的是cli的 build:mp-weixin，没有复现你说的问题

辛苦了，我重新创建Demo项目再试试

回复 t***@huanlong.me: 我贴个demo给你吧

可以看下这个附件

好的

你的demo我跑了确实没问题，感谢，后续我们自己再往分包和uni-simple-router这两个方向去排查

这个问题通常是由于微信小程序环境下Vue3的编译差异导致的。以下是解决方案：

  1. 确保子组件正确导出：
<script setup>
const emit = defineEmits(['success'])

// 需要将方法暴露给模板
defineExpose({
  verify
})
</script>
  1. 检查组件命名是否正确：
  • 确保组件名VerifySmcPopup与导入名称一致
  • 在微信小程序中建议使用短横线命名verify-smc-popup
  1. 调试建议：
  • 在子组件emit前后添加console.log确认事件是否触发
  • 检查微信开发者工具的控制台是否有警告信息
  1. 备选方案（如果仍不工作）：
// 父组件改用v-on监听
<VerifySmcPopup [@vnode-mounted](/user/vnode-mounted)="(e) => e.component?.exposed?.verify()" 
                @success="onVerifySuccess"/>
回到顶部