Vue的 this.$refs.xxx 报错undefined解决办法

目录

一、背景

二、解决办法

1、DOM加载完成后再调用

2、子组件第一次加载时不调用

---

一、背景

用ref 注册子组件，父组件可以通过this.$refs.xx.fn调用子组件里的函数，

页面初始化的时候调用this.$refs.xxx的时候提示undefined, 一开始以为方式失灵了,后来是发现

因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。”

也就是说 ref 只有等页面加载完成好之后你才能调用 this.$refs ，如果你使用v-if 、v-for渲染页面的话，那么在刚开始页面没没渲染之前你是拿不到this.$refs的，所以要等到页面渲染之后拿才可以。

二、解决办法

1、DOM加载完成后再调用

生命周期的了解:Vue中created和mounted详解_vue mounted_慕白Lee的博客-CSDN博客

demoMethod() {
  this.$nextTick(() => {
    ...
  })
},

2、子组件第一次加载时不调用

定义第一次调用状态

data(){
    return {
        updalod:{
            isFirst:false,
        }
    }
}

适用于特定场景, 然后第一次渲染不执行,需要注意的是定义的变量需要在子组件下, 不然也是获取不到的

有用请点赞，养成良好习惯！

鼓励、交流、疑问请留言！