在 Vue 项目中，通过 @click 绑定按钮点击事件时，若想获取按钮显示的文本（如 "btnName"），不能直接访问 target.value（按钮无 value 属性），而应读取其 textContent 或 innerText；同时需确保类型断言安全、DOM 节点存在且有子文本节点。
在 vue 项目中，通过 `@click` 绑定按钮点击事件时，若想获取按钮显示的文本（如 "btnname"），不能直接访问 `target.value`（按钮无 `value` 属性），而应读取其 `textcontent` 或 `innertext`；同时需确保类型断言安全、dom 节点存在且有子文本节点。
在 Vue（尤其是组合式 API + TypeScript）项目中，新手常误以为 event.target 的 value 属性能返回按钮的可见文本——但
✅ 正确做法：使用 textContent 获取按钮文本
推荐写法（健壮、TypeScript 友好）：
sendClick(event: MouseEvent): void {
const target = event.target;
// 类型守卫：确保是 HTMLButtonElement 且包含文本内容
if (target instanceof HTMLButtonElement && target.textContent) {
console.log('Clicked button text:', target.textContent.trim());
}
}? 说明：instanceof 比类型断言 as HTMLButtonElement 更安全，可避免运行时类型错误；trim() 清除可能的首尾空格或换行。
⚠️ 常见误区与修正
| 错误写法 | 问题原因 | 正确替代 |
|---|---|---|
| (target as HTMLButtonElement).value | 使用 target.textContent | |
| target.firstChild?.textContent | firstChild 可能是文本节点、注释节点甚至 null（如含图标 SVG） | 直接用 target.textContent（自动聚合所有文本子节点） |
| 忽略 event.target 与 event.currentTarget 区别 | 若按钮内嵌标签（如 ），target 可能是子元素而非 | 如需严格获取按钮自身内容，建议用 event.currentTarget.textContent |
? 进阶建议：增强可维护性
若需区分多个按钮（如不同功能），不推荐依赖文本内容做逻辑判断（易受国际化、样式变更影响），而应使用 data-* 属性：
立即学习“前端免费学习笔记（深入）”；
<button class="w-32" data-action="submit" @click="handleButtonClick">提交</button> <button class="w-32" data-action="cancel" @click="handleButtonClick">取消</button>
handleButtonClick(event: MouseEvent): void {
const btn = event.currentTarget as HTMLButtonElement;
const action = btn.dataset.action;
console.log('Action:', action); // "submit" / "cancel"
}✅ 总结
- 优先使用 instanceof 进行类型检查，比强制断言更安全；
- 在模板中尽量用 data-* 属性承载语义化标识，而非依赖文本内容；
- event.currentTarget 比 event.target 更适合获取绑定事件的原始元素（尤其存在子元素时）。
遵循以上原则，即可稳定、可靠地在 Vue 中响应按钮点击并准确提取所需信息。
