前言
Vue中在mounted中通过this.$refs但是获取不到属性的几种常见情况分析。
一、使用this.$refs 获取的组件使用了组件懒加载
<Scroll ref="scrollTop"></Scroll>
components: {
Scroll: () => import("@/components/scroll"),
},
分析:使用ES6懒加载的这种方式引入该组件,会将多个模块的js分割打包,所以改组件不会在页面加载完成的时候全部加载,所以在mounted函数中获取不到对应组件。
解决办法::采用原始的组件引入方式,不采用懒加载。
import Scroll from 'components/common/scroll/Scroll.vue'
二、和Vue指令同用比如(v-for,v-if,v-show等)
<Scroll ref="scrollTop" v-if="isLoading"></Scroll>
import Scroll from 'components/common/scroll/Scroll.vue'
分析:比如使用了v-if 或者 v-show 这些指令的前提下,使用this.$refs 获取DOM,会出现一个
Error in updated hook: "TypeError: Cannot read property 'style' of undefined"这样的报错,因为v-if等指令,会根据不同的条件去动态的渲染DOM树,因此这些 DOM 在 mounted 阶段是不存在的,在所以使用$refs是不能获取到DOM对象的。
解决办法::将ref 与 vue指令分开使用,不能写道一个DOM上
三、调用时机不对
- mounted 阶段是加载阶段,有些DOM可能存在还没有完成的情况, updated 阶段则是完成了数据更新到 DOM 的阶段(对加载回来的数据进行处理),此时,再使用 this.$refs.xx,就 100% 能找到该 DOM 节点。
- updated 与 mounted 不同的是,在每一次的 DOM 结构更新,Vue.js 都会调用一次 updated 钩子函数,而 mounted 钩子函数仅仅只执行一次而已。
- 我们也可以和 n e x t T i c k 结 合 使 用 , nextTick结合使用, nextTick结合使用,nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用$nextTick,则可以在回调中获取更新后的 DOM。
总结
这篇文章主要给大家分析了Vue中在mounted中通过this.$refs但是获取不到属性的几种常见情况,给出了一些个人的解决办法和思路,希望对大家有所帮助。