Vue中如何获取ref属性设置的自定义标识值？

AI 小北

2026-10-2

解决方案

Vue中$refs的设计逻辑为：$refs本身是一个对象，键就是你在模板中自定义的ref属性字符串，值是该ref绑定的DOM元素或组件实例。你现在的写法this.$refs.wwww取到的是键对应的值，也就是DOM元素，要拿到wwww这个自定义的ref属性值可以用以下两种方案：

方案1：预定义ref标识变量（最推荐，无需额外计算）
把ref的标识抽成可复用的变量，模板和业务逻辑里都复用这个变量即可：
模板部分修改为：

<form @submit.prevent enctype="multipart/form-data">
    <input type="file" :ref="fileInputRef" @change="selectFile">
</form>

JS部分：

export default {
  data() {
    return {
      fileInputRef: 'wwww' // 这里存储的就是你要的ref值
    }
  },
  methods: {
    selectFile() {
      // 直接访问就能拿到wwww
      console.log(this.fileInputRef) 
      // 同时依然可以正常通过ref取DOM元素
      console.log(this.$refs[this.fileInputRef])
    }
  }
}

方案2：从$refs对象中反向查找（适合已有DOM元素反查对应ref名的场景）
如果已经拿到了ref对应的DOM元素，想反查它对应的ref字符串，可以遍历$refs的键做匹配：

// 拿到目标DOM元素
const targetDom = this.$refs.wwww
// 遍历$refs找匹配的键
const refKey = Object.keys(this.$refs).find(key => this.$refs[key] === targetDom)
console.log(refKey) // 输出wwww