Vue新手求教：如何通过@change事件参数获取触发元素？

嘿，别纠结啦，你完全可以通过事件参数直接拿到触发元素，而且这才是Vue里处理这类场景的推荐方式，比用refs要灵活得多！

直接通过$event获取触发元素 #

Vue的事件绑定里，你可以把原生事件对象作为参数传给处理函数——只需要在模板里写@change="handleChange($event)"，然后在方法里接收这个参数，event.target就是触发事件的DOM元素了。

举个具体的例子：

<template>
  <!-- 单个输入框 -->
  <input 
    type="text" 
    @change="handleInputChange($event)" 
    placeholder="输入后失去焦点试试"
  />

  <!-- 循环生成的多个输入框 -->
  <div v-for="(item, index) in inputList" :key="index">
    <input 
      type="text" 
      @change="handleListInputChange($event, index)" 
      :placeholder="`输入框${index+1}`"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputList: [1, 2, 3]
    }
  },
  methods: {
    handleInputChange(event) {
      // 获取触发元素
      const triggerElement = event.target;
      console.log('触发change的元素:', triggerElement);
      console.log('输入的值:', triggerElement.value);
      // 也可以直接操作DOM，比如修改样式
      triggerElement.style.border = '1px solid green';
    },
    handleListInputChange(event, index) {
      console.log(`第${index+1}个输入框触发了事件`, event.target);
    }
  }
}
</script>

对比refs的方式 #

你现在用的this.$refs.tarif1Input.$el也能拿到元素，但这种方式更适合主动操作DOM的场景（比如手动聚焦、修改元素属性），而不是事件触发时被动获取。

用refs的缺点：

• 如果是动态生成的元素（比如v-for循环），refs会变成数组，你还要额外判断索引，很麻烦；
• 每次获取都要依赖预先定义的ref名称，不够灵活，事件触发时直接拿event.target才是最直接的对应关系。

关于“比原生绑定倒退”的疑问 #

其实这完全是误解啦！Vue的设计核心是数据驱动视图，尽量让你少操作DOM，但如果确实需要访问DOM元素，它并没有把路堵死——$event就是专门用来传递原生事件对象的入口，而且Vue内部已经帮你做了跨浏览器的事件兼容处理，比你自己手动绑定addEventListener还要省心。

这种方式既保留了声明式开发的简洁，又给你留了操作原生DOM的灵活度，根本不是倒退哦～

内容的提问来源于stack exchange，提问作者Henrik Clausen