Vue $refs 的正确使用姿势

2023-01-04 17:09:11

揭秘 Vue.js $refs：访问子组件和 DOM 元素的利器

Vue.js 作为一种流行的前端框架，提供了一系列强大而便捷的功能，其中 refs 属性就是其中之一。本文将深入探讨 refs 的奥秘，帮助你掌握这个神奇的工具，解锁 Vue.js 的无限潜力。

什么是 $refs？

refs 属性本质上是一个对象，它包含了所有子组件或 DOM 元素的引用。通过在组件模板中使用 ref 属性，你可以为这些元素指定唯一标识符，然后通过 refs 对象进行访问。

<template>
  <div ref="myRef">
    Hello, world!
  </div>
</template>

在组件脚本中，你可以通过 this.$refs.myRef 来轻松获取该元素。

export default {
  mounted() {
    console.log(this.$refs.myRef); // => <div>Hello, world!</div>
  }
}

为什么我得到 undefined 的错误？

在使用 refs 时，你可能会遇到令人困惑的 undefined 错误。这是因为 refs 属性是在组件渲染之后才创建的。因此，如果你在组件渲染之前尝试访问它，就会遇到这个错误。

另一个导致 undefined 错误的常见原因是，你在 v-if 或 v-for 指令中使用了 refs。这是因为这些指令是在组件渲染之前执行的，此时 refs 还没有被创建。

如何解决 undefined 的错误？

为了避免 undefined 错误，你需要在组件渲染之后再访问 $refs。可以通过使用 mounted 或 updated 生命周期钩子来实现。

export default {
  mounted() {
    console.log(this.$refs.myRef); // => <div>Hello, world!</div>
  },
  updated() {
    console.log(this.$refs.myRef); // => <div>Hello, world!</div>
  }
}

你还可以使用 nextTick 函数来延迟访问 $refs。

export default {
  methods: {
    accessRefs() {
      this.$nextTick(() => {
        console.log(this.$refs.myRef); // => <div>Hello, world!</div>
      });
    }
  }
}