currentTarget vue 获得当前div的class

在 Vue 中，可以使用 `$event.currentTarget` 来获取当前触发事件的元素，然后通过 `classList` 属性获取该元素的 class 列表。以下是一个示例：

HTML 代码：

<div class="example" @click="handleClick"></div>

Vue 组件中的 `handleClick` 方法：

methods: {
  handleClick(event) {
    const currentTarget = event.currentTarget;
    const classList = currentTarget.classList;
    console.log(classList);
  }
}

在控制台中会输出当前元素的 class 列表。

相关问题

<template> <div> <div class="up_img_item" v-for="(item, index) in chooseImgs" :key="index" @click="handleRemoveImg(index)" :data-index="index"> <UpImg :src="item"></UpImg> </div> </div> </template>其功能想用// 点击 自定义图片组件 handleRemoveImg(e) { // 2 获取被点击的组件的索引 const { index } = e.currentTarget.dataset; // 3 获取data中的图片数组 let { chooseImgs } = this.data; // 4 删除元素 chooseImgs.splice(index, 1); this.setData({ chooseImgs }) }在hbuilderx的vue上要怎么改才可以

在HBuilderX的Vue项目中，如果你想要将上述功能转换为Vue语法，你可以按照以下步骤进行修改：

1. 在Vue组件的template部分，使用`v-for`指令来循环遍历`chooseImgs`数组，并设置`key`属性为索引值。在每个循环项中绑定点击事件，并传递索引值。具体代码如下：

<template>
  <div>
    <div class="up_img_item" v-for="(item, index) in chooseImgs" :key="index" @click="handleRemoveImg(index)" :data-index="index">
      <UpImg :src="item"></UpImg>
    </div>
  </div>
</template>

在上面的代码中，我们使用了Vue的`v-for`指令来循环遍历`chooseImgs`数组，并使用`:key`属性设置了唯一的键值。在每个循环项的父元素上绑定了点击事件`@click`，并通过`:data-index`属性传递了索引值。

2. 在Vue组件的script部分，定义`handleRemoveImg`方法。具体代码如下：

<script>
export default {
  methods: {
    handleRemoveImg(index) {
      // 3 获取data中的图片数组
      let chooseImgs = this.chooseImgs;
      // 4 删除元素
      chooseImgs.splice(index, 1);
      this.chooseImgs = chooseImgs;
    }
  }
}
</script>

在上面的代码中，我们定义了一个名为`handleRemoveImg`的方法，并接收了索引值作为参数。在该方法内部，我们获取`chooseImgs`数组，并使用`splice()`方法删除指定索引的元素。

请根据你的具体需求修改代码中的类名、属性名以及其他相关的部分。希望这可以帮助到你！如果你还有其他问题，请随时提问。

vue3 函数传参当前dom节点

### 实现方法

在 Vue 3 中，可以利用 `ref` 来获取 DOM 元素，并将其作为参数传递给函数。具体而言，在模板中使用 `ref` 属性标记目标元素，之后可以通过组合 API 或选项 API 获取该元素并传入自定义函数。

#### 使用组合 API 和 `setup`

当采用组合 API 编写组件时，可以在 `<script setup>` 或者普通的 `<script>` 标签内声明响应式的引用对象。一旦页面完成首次渲染周期后，即可安全地访问实际的 DOM 节点[^1]。

<template>
  <div @click="handleClick">点击这里</div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const myDivRef = ref(null);

function handleClick(event) {
    console.log('当前点击的DOM节点:', event.currentTarget);
    doSomethingWithElement(myDivRef.value); // 将DOM节点作为参数传递给其他函数
}

// 假设这是另一个处理DOM的操作函数
function doSomethingWithElement(element) {
    if (element) {
        element.style.backgroundColor = "lightblue";
    }
}
</script>

上述代码片段展示了如何通过事件处理器中的 `event.currentTarget` 获取触发事件的具体 DOM 元素，并且也演示了怎样借助 `ref` 定义好的变量名 `.value` 属性取得对应的 DOM 参考。

#### 动态创建组件场景下的应用

对于动态加载或条件渲染的情况下，可能需要更复杂的逻辑来确保正确的时间点拿到 DOM 节点再执行相应操作。此时除了基本的 `ref` 处理外，还需要考虑生命周期钩子如 `onMounted()` 确认时机合适后再做进一步动作[^4]。

import { createApp, h, ref, onMounted } from 'vue';
import MyComponent from './MyComponent.vue';

let appContainer = document.getElementById('app');
if (!appContainer) throw new Error("未找到挂载点");

const componentInstance = ref();

const mountDynamicComponent = () => {
    const vnode = h(MyComponent, {}, null);
    
    const mountedApp = createApp({
        setup() {
            onMounted(() => {
                setTimeout(() => {
                    // 这里假设有一个延迟后的操作依赖于真实的DOM存在
                    manipulateDom(componentInstance.value.$el);
                }, 0);
                
                return {};
            });
            
            return { componentInstance };
        },
        
        template: '<component :is="vnode" ref="componentInstance"></component>'
    });

    mountedApp.mount(appContainer);
};

function manipulateDom(domEl) {
    domEl && domEl.classList.add('highlight'); // 修改样式或其他交互行为
}

这段例子说明了在一个异步流程下（比如按需加载组件），仍然能够可靠地捕获到最终呈现出来的 DOM 结构，并对其进行必要的修改或增强。