Vue2 中 ref 的使用指南在 Vue2 开发中，ref 是一个非常实用的属性，它可以帮助我们直接访问 DOM 元素

在 Vue2 开发中，ref 是一个非常实用的属性，它可以帮助我们直接访问 DOM 元素或子组件实例。通过合理使用 ref，可以实现一些复杂的交互逻辑，如焦点控制、表单校验等。本文将详细介绍 ref 的用法，并通过示例展示其在实际开发中的应用场景。

一、`ref` 的基本概念

ref 是一个特殊的属性，可以被用在模板中的任何元素或子组件上。当你在元素或子组件上使用 ref 时，Vue 会将该元素或子组件的引用存储在组件实例的 $refs 对象中。这样，你就可以通过 this.$refs.refName 来访问对应的元素或子组件。

二、`ref` 的使用场景

（一）访问 DOM 元素

在某些情况下，我们需要直接操作 DOM 元素，例如获取元素的尺寸、设置焦点等。ref 可以帮助我们轻松地获取到 DOM 元素的引用。

<template>
  <div>
    <input ref="myInput" type="text" placeholder="请输入内容"/>
    <button @click="focusInput">聚焦输入框</button>
  </div>
</template>

<script>
export default {
  methods: {
    focusInput() {
      // 通过 ref 获取 DOM 元素并调用 focus 方法
      this.$refs.myInput.focus();
    }
  }
};
</script>

（二）访问子组件实例

ref 也可以用在子组件上，这样我们可以直接访问子组件的实例，从而调用子组件的方法或访问子组件的数据。

示例代码：

假设有一个子组件 ChildComponent，代码如下：

<template>
  <div>
    <p>子组件内容</p>
    <button @click="childMethod">子组件方法</button>
  </div>
</template>

<script>
export default {
  methods: {
    childMethod() {
      console.log("子组件方法被调用");
    }
  }
};
</script>

在父组件中使用 ChildComponent 并通过 ref 访问它：

<template>
  <div>
    <ChildComponent ref="child" />
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

<script>
import ChildComponent from "./ChildComponent.vue";

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      // 通过 ref 调用子组件的方法
      this.$refs.child.childMethod();
    }
  }
};
</script>

当点击父组件中的按钮时，调用 callChildMethod 方法，通过 this.$refs.child 获取到子组件的实例，并调用子组件的 childMethod 方法。

（三）用于表单校验

示例代码：

假设我们有一个简单的登录表单，需要对用户名和密码进行校验。用户名不能为空，密码长度不能少于 6 位。

<template>
  <div>
    <form @submit.prevent="submitForm">
      <div>
        <label for="username">用户名：</label>
        <input type="text" id="username" v-model="username" ref="usernameInput"/>
        <span v-if="usernameError" class="error">{{ usernameError }}</span>
      </div>
      <div>
        <label for="password">密码：</label>
        <input type="password" id="password" v-model="password" ref="passwordInput"/>
        <span v-if="passwordError" class="error">{{ passwordError }}</span>
      </div>
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      usernameError: '',
      passwordError: ''
    };
  },
  methods: {
    validateUsername() {
      if (!this.username) {
        this.usernameError = '用户名不能为空';
        return false;
      }
      this.usernameError = '';
      return true;
    },
    validatePassword() {
      if (this.password.length < 6) {
        this.passwordError = '密码长度不能少于 6 位';
        return false;
      }
      this.passwordError = '';
      return true;
    },
    submitForm() {
      let isUsernameValid = this.validateUsername();
      let isPasswordValid = this.validatePassword();

      if (isUsernameValid && isPasswordValid) {
        alert('表单提交成功！');
        // 这里可以进行表单提交的逻辑
      } else {
        // 如果校验失败，可以将焦点定位到第一个出错的输入框
        if (!isUsernameValid) {
          this.$refs.usernameInput.focus();
        } else if (!isPasswordValid) {
          this.$refs.passwordInput.focus();
        }
      }
    }
  }
};
</script>

<style scoped>
.error {
  color: red;
}
</style>

当ref和elementUI里的form表单一起使用的时候，可以通过ref使用默认的form表单校验。

三、注意事项

ref 的值类型：当 ref 用在普通元素上时，this.$refs.refName 的值是 DOM 元素；当用在子组件上时，值是子组件实例。
ref 的使用时机：由于 DOM 更新是异步的，因此在组件的 mounted 钩子之前，this.$refs.refName 可能是 undefined。如果需要在组件挂载后立即访问 ref，建议在 mounted 钩子中进行操作。
避免滥用 ref：虽然 ref 很方便，但过度依赖它可能会导致代码难以维护。在可能的情况下，尽量通过 Vue 的数据绑定和事件处理来实现功能，而不是直接操作 DOM。

Vue2 中 ref 的使用指南

一、ref 的基本概念

二、ref 的使用场景