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 点击事件获取当前元素

在 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>` 按钮。

vue3 for循环如何点击获取当前dom元素

在 Vue3 中，可以使用 `ref` 创建一个引用，然后将其绑定到需要获取 DOM 元素的元素上。然后，在点击事件中，可以使用 `event.target` 获取当前点击的 DOM 元素。

示例代码如下：

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id" ref="items" @click="handleClick">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const list = ref([
      { id: 1, name: 'item 1' },
      { id: 2, name: 'item 2' },
      { id: 3, name: 'item 3' },
    ]);

    const handleClick = (event) => {
      const item = event.target; // 当前点击的 DOM 元素
      console.log(item);
    };

    return {
      list,
      handleClick,
    };
  },
};
</script>

在上面的示例中，我们通过 `ref` 给每个 `li` 元素创建了一个引用 `items`，然后在点击事件中使用 `event.target` 获取当前点击的 DOM 元素，并在控制台中输出。