vue ref

作者：﹏丶夜，深了发布日期:2025-07-15 浏览:6

<template>
  <div>
    <input ref="myInput" placeholder="Enter something">
    <button @click="focusInput">Focus Input</button>
  </div>
</template>

<script>
export default {
  methods: {
    focusInput() {
      // 使用 this.$refs 来访问 ref 属性指定的 DOM 元素
      this.$refs.myInput.focus();
    }
  }
}
</script>

解释说明：

ref 是 Vue 中的一个特殊属性，用于在模板中给元素或子组件注册一个引用信息。
在上面的示例中，我们给 <input> 元素添加了一个 ref="myInput" 的属性，这样我们就可以通过 this.$refs.myInput 来访问这个 DOM 元素。
当用户点击按钮时，focusInput 方法会被调用，该方法通过 this.$refs.myInput.focus() 来让输入框获得焦点。

如果你需要更多的 ref 示例或有其他问题，请随时告诉我！

上一篇：vue table

下一篇：vue slot