关于Vue3点击事件怎么获取id

在 Vue3 中，获取点击元素的 id 有以下两种常见方式，适用于不同场景：

---

方法一：通过事件对象直接获取

在模板中绑定点击事件时，Vue 会自动将原生事件对象 event 传递给方法。通过 event.target 可以访问触发事件的 DOM 元素，进而获取其 id。

<template>
  <button @click="handleClick" id="my-button">点击我</button>
</template>

<script setup>
const handleClick = (event) => {
  const id = event.target.id; // 获取元素的 id
  console.log("ID:", id); // 输出: "my-button"
};
</script>

注意事项：

• 如果元素内部有子元素（例如图标或文本节点），event.target 可能指向子元素而非按钮本身。此时可以用 event.currentTarget 确保始终获取绑定事件的元素：

  const id = event.currentTarget.id;
  

---

方法二：传递自定义参数

如果元素 id 是动态的（例如在 v-for 循环中），可直接将 id 作为参数传递给方法，避免操作 DOM。

<template>
  <div v-for="item in items" :key="item.id">
    <!-- 将 item.id 直接作为参数传递 -->
    <button @click="handleClick(item.id)">ID: {{ item.id }}</button>
  </div>
</template>

<script setup>
const items = [{ id: 1 }, { id: 2 }, { id: 3 }];

const handleClick = (id) => {
  console.log("点击的 ID:", id); // 直接获取传递的 id
};
</script>

---

两种方法的对比

方法	适用场景	优点	缺点
通过 event 对象	静态 id 或需要直接操作 DOM	无需额外传参	需处理 target 与 currentTarget 差异
传递参数	动态数据（如循环项）	逻辑更清晰，直接获取数据	需手动绑定参数

---

根据实际需求选择合适的方式即可。若需要处理复杂交互，推荐优先使用传递参数的方式，减少直接操作 DOM。