异步组件懒加载 获取不到ref

关键字:获取不到ref,异步组件,$refs
记一次异步组件导致的bug

目前这个bug只在打包环境出现,本地环境不出现,暂时不清楚什么原因

先解释一下什么是异步组件,其实和vue-router的组件懒加载写法一样,只是应用在局部注册中而已


export default {
  components: {
    MdChart: () => import('@/components/子组件')
  },
}

好处的话就是懒加载的好处,可以微略提高一些脚本速度。

bug出现

由于我写的子组件需要调用组件内的一些methods来进行初始化,因此需要获取子组件的dom。和平常一样在mounted获取ref然后调用子组件的方法, 本地开发环境是没有问题的。
然后上线测试环境,怎么子组件没了,原来是$refs获取不到,子组件没办法初始化。

定位

其实我找了半天,一直把关注点放在ref的获取上,无论怎么调整,加上$nextTick和settimeout都没有用,本地不重现线上重现,最后还是聚焦在子组件上,发现这种引入的方式会导致mounted之后也获取不到子组件的dom,切换回官方的就好了

解决

子组件传出this代替refs获取
使用局部注册的方式

总结

问题找到了,平时还是推荐使用官方推荐的局部注册的方式吧,否则需要关注其他注册方式子组件的生命周期是否正确。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容