vue3 this.$refs

作者：洃铯哖輪发布日期:2025-08-24 浏览:111

<template>
  <div>
    <input ref="inputRef" type="text" />
    <button @click="focusInput">Focus Input</button>
  </div>
</template>

<script>
export default {
  methods: {
    focusInput() {
      // 使用 this.$refs 访问模板中的 ref
      this.$refs.inputRef.focus();
    }
  }
}
</script>

解释说明：

在 Vue 3 中，this.$refs 是一个对象，它包含了所有在模板中使用了 ref 属性的元素或组件。
在上面的示例中，我们给 <input> 元素添加了一个 ref="inputRef"，这样我们就可以通过 this.$refs.inputRef 来访问这个输入框。
当点击按钮时，会触发 focusInput 方法，该方法通过 this.$refs.inputRef.focus() 来让输入框获得焦点。

上一篇：vue3 prop

下一篇：vue跨域解决方案