在 Vue 项目中，通过 @click 处理按钮点击事件时，若想获取按钮显示的文本（如 "btnName"），不应访问 event.target.value（按钮无 value 属性），而应读取 event.target.textContent 或 innerText；同时需注意 TypeScript 类型断言的安全性与 DOM 节点结构。
在 vue 项目中，通过 `@click` 处理按钮点击事件时，若想获取按钮显示的文本（如 `"btnname"`），不应访问 `event.target.value`（按钮无 `value` 属性），而应读取 `event.target.textcontent` 或 `innertext`；同时需注意 typescript 类型断言的安全性与 dom 节点结构。
在 Vue（尤其是组合式 API 或 Options API 的 TypeScript 项目）中，处理原生按钮点击事件时，一个常见误区是误用 event.target.value 来读取按钮文字。实际上，
✅ 正确做法：使用 textContent 获取按钮文本
假设模板中按钮如下：
<button class="w-32" attr-type="submit" @click="sendClick">btnName</button>
在 TypeScript 方法中，应这样安全地提取文本：
sendClick(event: MouseEvent): void {
// 1. 类型守卫：确保 event.target 是 Element（而非可能的 TextNode 等）
if (!(event.target instanceof Element)) return;
// 2. 安全断言为 HTMLButtonElement（可选，但更语义化）
const button = event.target as HTMLButtonElement;
// 3. 获取按钮内联文本内容（兼容含空格、换行的文本）
const buttonText = button.textContent?.trim() || '';
console.log('Clicked button text:', buttonText); // 输出: "btnName"
}? 为什么不用 value？
立即学习“前端免费学习笔记（深入）”；
⚠️ 注意事项与最佳实践
避免直接 target.firstChild：原始答案中 el.firstChild?.textContent 存在风险——若按钮内含图标（如 ），firstChild 可能是 元素，导致取到 undefined 或错误内容。textContent 会自动合并所有子节点的文本，更鲁棒。
类型安全建议：使用 instanceof Element 做运行时校验，比强制类型断言 as HTMLButtonElement 更安全；尤其当事件可能冒泡自子元素时（如按钮内嵌 SVG）。
-
Vue 3 推荐替代方案（语义化更强）：
若按钮文本固定且无需动态解析，可直接传参：<button @click="sendClick('btnName')">btnName</button>sendClick(name: string): void { console.log('Button name:', name); }这种方式规避了 DOM 操作，更符合 Vue 的响应式理念，也便于单元测试。
✅ 总结
| 场景 | 推荐方式 |
|---|---|
| 需动态读取任意按钮文本（含复杂子结构） | event.target.textContent?.trim() |
| 按钮结构简单、纯文本 | event.target.innerText（渲染后文本，含样式影响） |
| 文本已知且静态 | 直接在 @click 中传参，语义清晰、类型安全 |
掌握这一细节，不仅能解决“undefined”问题，更能写出更健壮、可维护的 Vue 事件处理逻辑。
