vue3如何获取当前点击的元素

Vue3可以利用事件监听器(@click等)以及事件对象来获取当前点击的元素。可以在事件处理函数中通过`event.target`或`event.currentTarget`来获取当前点击的元素，具体代码如下：

<template>
  <div @click="handleClick">
    <p>Click me!</p>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const currentElem = ref(null)

    function handleClick(event) {
      currentElem.value = event.target // 获取当前点击的元素
    }

    return {
      currentElem,
      handleClick
    }
  }
}
</script>

在上述代码中，我们通过`currentElem`这个ref来存储当前点击的元素，然后在`handleClick`这个事件处理函数中，通过`event.target`来获取当前点击的元素，并将其赋值给`currentElem.value`。这样就可以在Vue3中获取当前点击的元素了。

相关问题

vue 获取当前点击元素自定义属性

可以通过 $event 对象获取当前点击元素的自定义属性，具体代码如下：

<template>
  <div>
    <button @click="handleClick" data-id="123">点击</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      const id = event.target.dataset.id;
      console.log(id); // 输出 123
    },
  },
};
</script>

在上面的代码中，我们给 button 元素添加了一个自定义属性 data-id，并且在点击事件的回调函数中通过 $event.target 获取当前点击的元素，并通过 dataset.id 获取自定义属性的值。

vue 点击事件获取当前元素

在 Vue 中，你可以通过 `@click` 或 `v-on:click` 绑定一个点击事件，并通过 `$event.target` 来获取当前被点击的元素。例如：

<template>
  <div @click="handleClick">
    <button>按钮</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      console.log(event.target); // 输出点击的元素，这里为 <button> 按钮
    }
  }
}
</script>

在上面的例子中，我们绑定了一个点击事件到 `<div>` 元素上，当点击 `<button>` 按钮时，`handleClick` 方法会被调用，并且会将该点击事件作为参数传递进来。在方法中，我们可以通过 `$event.target` 来获取当前被点击的元素，即 `<button>` 按钮。