Vue函数中如何实现元素自身引用？

方法1：通过$event传递触发事件的元素 #

这是最贴近你原生写法的方式，在Vue模板的事件绑定中，直接把$event作为参数传给处理函数，就能拿到触发事件的DOM元素。

模板代码： #

<div id="foo" @click="clickFunction($event)"></div>

对应函数实现（Vue2/Vue3通用）： #

// Vue2 选项式API
methods: {
  clickFunction(event) {
    console.log(event.target.id); // 输出 "foo"
    // 直接操作元素，比如修改样式
    event.target.style.backgroundColor = '#eee';
  }
}

// Vue3 组合式API（<script setup>）
const clickFunction = (event) => {
  console.log(event.target.id); // 输出 "foo"
}

注意：如果事件存在冒泡，event.target是实际触发事件的子元素，若要获取绑定事件的父元素，改用event.currentTarget即可。

方法2：使用ref绑定固定元素 #

如果需要在非事件场景也能引用元素，或者提前获取元素实例，可以用Vue的ref属性绑定元素，之后在函数中直接调用。

模板代码： #

<div id="foo" ref="fooElement" @click="clickFunction"></div>

对应函数实现： #

Vue2 选项式API：

methods: {
  clickFunction() {
    const element = this.$refs.fooElement;
    console.log(element.id); // 输出 "foo"
    // 操作元素
    element.style.color = 'red';
  }
}

Vue3 组合式API（