有关$refs报undefined的问题

2020/12/10项目中遇到的关于$refs报undefined的问题

问题场景:
现在有一个父组件,一个子组件,通过点击父组件触发子组件的一个事件,通过

this.&refs.childrenRefs.function(),但是这个时候报错,子组件是一个弹窗,通过点击父组件来显示,但是点击的时候$refs下面拿不到childrenRefs组件的方法和数据。显示undefined.

查阅资料,原因是通过点击事件拿到子组件的refs,但是此时子组件还没有加载完成,所以就拿不到refs,出现这个问题的原因主要是在vue还没进行加载完方法的时候就开始进行执行组件方法就会报这个错误,解决的办法很简单,只要在让方法在vue加载完组件之后再进行执行就好了!
可以通过设置定时器setTimeout,或者this.$nextTick()

this.$nextTick(()=>{
this.$refs.children.function()
})

这个问题好像已经遇到过两次了。所以还是需要深入去了解一下,以上只是一些很浅显的东西,目前只是为了记录为什么会存在这种原因,以及如何解决。

刚刚查阅了有关ref
在这里插入图片描述

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

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值