vue $refs

作者：噬血啸月发布日期:2026-05-24 浏览:41

<template>
  <div>
    <!-- 定义一个 input 元素，并使用 ref 属性为它指定一个引用名称 "myInput" -->
    <input type="text" ref="myInput" />
    <button @click="focusInput">Focus Input</button>
  </div>
</template>

<script>
export default {
  methods: {
    focusInput() {
      // 使用 this.$refs 来访问 ref 为 "myInput" 的 DOM 元素，并调用其 focus 方法
      this.$refs.myInput.focus();
    }
  }
};
</script>

解释说明：

ref 是 Vue 提供的一个特殊属性，用于给元素或子组件注册一个引用信息。
在上面的示例中，我们通过 ref="myInput" 给 <input> 元素添加了一个引用名称 myInput。
然后在方法 focusInput 中，通过 this.$refs.myInput 获取到该 DOM 元素，并调用它的原生方法 focus()，使输入框获得焦点。

上一篇：vueconfig.js配置文件 proxy

下一篇：vue dispatch