Vue使用ref取值时报Property 'value' does not exist on type 'Vue'错误如何解决

这是TypeScript的类型推断限制导致的：this.$refs下的元素默认会被推断为通用Vue类型，没有内置value属性的类型声明。运行时能正常打印取值是因为你绑定ref的目标组件/输入框确实存在value属性，只是TS的类型定义没有对齐实际结构。你之前尝试的类型断言没有匹配你实际要访问的value属性，所以没有解决对应的类型报错。

你可以根据自己的项目场景选择以下任意一种修改方式：

• 方式1：临时类型断言（适合单次使用场景）
  直接给this.$refs.password断言为带value属性的类型即可：

confirmPasswordRules: [
  (v: string ) => !!v || "Password is required",
  (v: string ) => {
    const passwordRef = this.$refs.password as HTMLInputElement | { value: string }
    return !passwordRef || v === passwordRef.value || "Passwords do not match"
  }
],

如果ref绑定的是自定义输入组件，没有声明组件类型的话直接断言为{ value: string }也可以解决问题。

• 方式2：提前声明$refs类型（适合多场景复用）
  在组件内提前声明$refs的具体类型，后续所有地方使用该ref都不会再报类型错误：
  如果是Vue2+TS类组件写法：

@Component
export default class YourComponent extends Vue {
  $refs: Vue['$refs'] & {
    password: HTMLInputElement | { value: string }
  }
  // 后续直接写this.$refs.password.value不会有类型报错
}

如果是Vue3选项式API写法：

export default defineComponent({
  // 声明$refs类型
  $refs: {} as {
    password: HTMLInputElement | { value: string }
  },
  data() {
    return {
      confirmPasswordRules: [
        (v: string ) => !!v || "Password is required",
        (v: string ) => (this.$refs.password) && (v === this.$refs.password.value  || "Passwords do not match")
      ]
    }
  }
})

• 方式3：改用v-model绑定（更推荐的写法，避免直接操作ref）
  不要通过ref获取密码值，直接给密码输入框绑定v-model到组件data属性，校验时直接取data内的变量，从根源上避免类型问题：

data() {
  return {
    password: '',
    confirmPassword: '',
    confirmPasswordRules: [
      (v: string ) => !!v || "Password is required",
      (v: string ) => v === this.password || "Passwords do not match"
    ]
  }
}

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