Vue Composition Api中emit值变更出现Cannot read 'target'错误求助

问题根源 #

你在模板的@change事件绑定中使用了handleChange()的写法，这会直接执行函数且不会自动传递事件对象，导致handleChange函数里的event参数为undefined，因此触发了Cannot read properties of undefined (reading 'target')的错误。

两种修复方式 #

方式一：省略括号，让Vue自动传递事件对象 #

修改模板中的事件绑定，去掉函数调用的括号：

<template>
  <select
    @change="handleChange"
  >
    <option value="text">Text</option>
    <option value="image">Image</option>
  </select>
</template>

<script lang="ts">
export default {
  name: "Select",
  setup(props, { emit }) {
    const handleChange = (event: Event) => {
      // 推荐将event类型从any改为Event，更符合TS规范
      emit("customChange", (event.target as HTMLSelectElement).value);
    };
    return {
      handleChange,
    };
  },
};
</script>

方式二：手动传递事件对象（使用$event） #

如果需要在调用时额外传递其他参数，可以通过$event显式传递事件对象：

<template>
  <select
    @change="handleChange($event)"
  >
    <option value="text">Text</option>
    <option value="image">Image</option>
  </select>
</template>

（script部分无需修改，保持原逻辑即可）

额外优化 #

建议将event的类型从any改为Event，并通过类型断言(event.target as HTMLSelectElement)获取下拉框元素，这样能获得更好的TypeScript类型提示，避免隐式类型转换问题。

内容的提问来源于stack exchange，提问作者El Hombre Sin Nombre