vue2 ref

作者：萫蕉姺森う发布日期:2025-02-20 浏览:129

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

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

解释说明：

在 Vue 2 中，ref 是一个特殊的属性，可以用于给元素或子组件注册引用信息。
ref 可以直接获取 DOM 元素或者子组件实例。在这个例子中，ref="myInput" 给输入框元素注册了一个名为 myInput 的引用。
通过 this.$refs.myInput 可以在 JavaScript 中访问到这个输入框元素，并调用其原生的 focus() 方法来聚焦该输入框。
当点击按钮时，会触发 focusInput 方法，从而让输入框获得焦点。

上一篇：npm create vue@latest

下一篇：vue 插件