为什么在Vue里用ref获取不到DOM元素？

宇文露露提问于 2026-03-26 08:29:21 阅读 27

前端

我在Vue组件里用ref想拿到一个div的DOM，但打印出来是undefined，明明已经加了ref属性，也用了nextTick，还是不行，到底哪里错了？

这是我的代码：

<template>
  <div ref="myDiv">目标元素</div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.myDiv); // 输出 undefined
  }
}
</script>

我来解答赞 3 收藏

反馈

1 条解答

书生シ明明 Lv1

在Vue里用ref拿不到DOM，首先得确认是不是生命周期的问题。你这代码写在mounted里，理论上应该能拿到的，但有时候组件渲染有延迟。

先试试把console.log放到updated钩子里看看能不能获取到。如果还不行，考虑是不是父组件或者插件影响了渲染。

还有个常见问题是v-if控制的元素，ref可能拿不到。这种情况下，确保元素是实际渲染出来的。

给你个简单的调试方法，加个watch观察一下：

export default {

  mounted() {

    this.checkRef();

  },

  methods: {

    checkRef() {

      setTimeout(() => {

        console.log(this.$refs.myDiv);

      }, 100); // 延迟检查

    }

  }

}

说真的，vue的ref有时候挺调皮的，特别是复杂组件嵌套的时候。如果实在不行，考虑换个简单点的方式实现你的需求，别死磕ref了。

2026-03-26 08:41