Vue3子组件defineEmits事件未触发问题排查

父组件代码存在几个明显错误，直接导致事件无法正常触发：

• 模板里的<div>标签结尾多了**符号，破坏了模板结构，引发组件渲染异常
• <script setup>标签未正确闭合，错误地重复写了<script>标签，导致脚本代码无法被Vue解析
• console.log语法错误：使用了逗号运算符，无法正确打印传递的参数，需将逗号移至括号内部
• 未导入子组件<Child>，Vue无法识别该自定义组件，自然无法监听它的事件

修复后的父组件代码：

<template>
  <div>
    someValue
    <Child @openTeleport="handleOpenTeleport" />
  </div>
</template>

<script setup>
// 根据子组件实际文件路径导入
import Child from './Child.vue';

const handleOpenTeleport = (value : any) => {
  alert("hello");
  console.log('openTeleport event received', value);
};
</script>

另外子组件有个细节可以优化：你定义了变量someValue = "someValue123"，但触发事件时传递的是字符串"someValue"，如果要传递变量的实际值，应该改成emits('openTeleport', someValue);。

内容的提问来源于stack exchange，提问作者javaz