Vue 中按钮点击事件获取按钮文本内容的正确方法

在 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 来读取按钮文字。实际上， 元素默认不具有 value 属性（除非显式设置），其可见文本内容存储在子文本节点中，因此应通过 textContent（推荐）或 innerText 获取。

✅ 正确做法：使用 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？
的 value 属性仅在表单提交时影响 FormData 或 event.submitter.value，且需显式声明（如 Save）。而按钮的显示文本由其子节点（通常是 TextNode）决定，textContent 正是为此设计的标准属性。

立即学习“前端免费学习笔记（深入）”；

⚠️ 注意事项与最佳实践

• 避免直接 target.firstChild：原始答案中 el.firstChild?.textContent 存在风险——若按钮内含图标（如 Submit），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 的响应式理念，也便于单元测试。

✅ 总结

掌握这一细节，不仅能解决“undefined”问题，更能写出更健壮、可维护的 Vue 事件处理逻辑。