文章详情
vue的 this.$refs 打印为undefined解决办法
发布时间:2021-10-21
沉默小管-技术博客
vue的 this.$refs 打印为undefined解决办法
992
1
原文地址:
https://www.php-china.com//detail/42
H1
H2
H3
H4
H5
H6
<p class="MsoNormal"> <span style="font-family:宋体;font-size:10.5000pt;"><span>用</span>ref <span>注册子组件,父组件可以通过</span><span>this.$refs.xx.fn</span><span>调用子组件里的函数,但是有时会出现 </span><span>fn </span><span>为定义的情况,这是为什么呢?</span></span><span style="font-family:Calibri;font-size:10.5000pt;"></span> </p> <p class="MsoNormal"> <span style="font-family:宋体;font-size:10.5000pt;">vue <span>官网中</span><span>ref </span><span>下有一段话</span><span> "</span></span><span style="font-family:宋体;color:#FF0000;font-size:10.5000pt;"><span>关于</span> ref <span>注册时间的重要说明:因为 </span><span>ref </span><span>本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 </span><span>- </span><span>它们还不存在!</span></span><span style="font-family:Calibri;color:#FF0000;font-size:10.5000pt;">$refs</span><span style="font-family:宋体;color:#FF0000;font-size:10.5000pt;"> <span>也不是响应式的,因此你不应该试图用它在模板中做数据绑定。</span></span><span style="font-family:宋体;font-size:10.5000pt;">"</span><span style="font-family:宋体;font-size:10.5000pt;"></span> </p> <p class="MsoNormal"> <span style="font-family:宋体;font-size:10.5000pt;"><span>也就是说</span> ref <span>只有等页面加载完成好之后你才能调用 </span><span>this.$refs </span><span>,如果你使用</span><span>v-if </span><span>、</span><span>v-for</span><span>渲染页面的话,那么在刚开始页面没没渲染之前你是拿不到</span><span>this.$refs </span><span>的,所以要等到页面渲染之后拿才可以</span></span><span style="font-family:宋体;font-size:10.5000pt;"></span> </p> <p class="MsoNormal"> <span style="font-family:宋体;font-size:10.5000pt;"></span> </p> <p class="MsoNormal"> <span style="font-family:宋体;font-size:10.5000pt;"><span>解决办法:</span></span><span style="font-family:宋体;font-size:10.5000pt;"></span> </p> <p class="MsoNormal"> <span style="font-family:宋体;font-size:10.5000pt;">1<span>、如果你在</span><span>mounted</span><span>里获取</span></span><span style="font-family:宋体;color:#FF0000;font-size:10.5000pt;">this.$refs</span><span style="font-family:宋体;font-size:10.5000pt;"><span>,因为</span></span><span style="font-family:宋体;color:#FF0000;font-size:10.5000pt;">dom<span>还未完全加载</span></span><span style="font-family:宋体;font-size:10.5000pt;"><span>,所以你是拿不到的,</span> </span><span style="font-family:Calibri;font-size:10.5000pt;">update</span><span style="font-family:宋体;font-size:10.5000pt;"><span>阶段则是完成了数据更新到</span> DOM <span>的阶段</span><span>(</span><span>对加载回来的数据进行处理</span><span>)</span><span>,此时,就可以使用</span><span>this.$refs</span><span>了</span></span><span style="font-family:宋体;font-size:10.5000pt;"></span> </p> <p class="MsoNormal"> <span style="font-family:宋体;font-size:10.5000pt;">2<span>、如果写在</span><span>method</span><span>中,那么可以使用 </span></span><span style="font-family:宋体;color:#FF0000;font-size:10.5000pt;">this.$nextTick(() => {})</span><span style="font-family:宋体;font-size:10.5000pt;"> <span>等页面渲染好再调用,这样就可以了</span></span><span style="font-family:宋体;font-size:10.5000pt;">(<span>推荐</span><span>)</span></span><span style="font-family:Calibri;font-size:10.5000pt;"></span> </p> <p class="MsoNormal"> <span style="font-family:宋体;font-size:10.5000pt;">3<span>、或者加个定时器延时加载</span><span>this.$refs</span><span>(</span></span><span style="font-family:宋体;font-size:10.5000pt;"><span>不推荐</span></span><span style="font-family:宋体;font-size:10.5000pt;"><span>)</span></span><span style="font-family:宋体;font-size:10.5000pt;"></span> </p>
上一篇
下一篇
收藏
支持
标签:
特别推荐
作者推荐
热门推荐
最新文章
统计信息
联系站长
加入技术群
日志总数:92篇
网站运行:1600天
累计访客:15880
热门文章
1. PHP基础概念
2. redis:ERR AUTH <password> called without any password configured for the default user解决办法
3. PHP的语言结构之包含文件
4. PHP中public,private,protected的区别
5. PHP魔术方法总结
6. php如何转换json格式中的中文
7. PHP7新特性(常用)
8. PHP7上项目报错A non-numeric value encountered解决办法
9. 运行golang出现invalid memory address or nil pointer dereference错误
10. git常用命令集合