热门标签
热门文章
- 1android 双清菜单,什么是双清？如何双清手机？安卓手机双清教程
- 2你必须知道的Docker数据卷(Volume)_dockerfile volume
- 3大模型时代：生成式AI发展与科技创新范式_大模型时代:生成式ai发展与科技创新范式
- 4AI垃圾溢出识别摄像机
- 5Langchain-Chatchat项目：4.1-P-Tuning v2实现过程_打断点调试langchain-chatchat
- 6逻辑回归（Logistic Regression）详解
- 7No matching version found for_no matching version found for @wattjs/peach@2.0.0-
- 8AI 为我制作了 5 份简历，过程太美好了_简历ai生成
- 9SQL注入详解
- 10STM32F407学习笔记二（GPIO）_gpiod->moder
当前位置: article > 正文
vue3学习与实践：遇到给组件设置ref属性获取不到实例的问题_vue3 $refs获取不到
作者：Gausst松鼠会 | 2024-03-09 06:16:51
赞
踩
vue3 $refs获取不到
1.问题描述
当几个组件需要根据状态值判断是否展示时，我们通常会用到v-if、v-else-if、v-else来设置展示与隐藏，同时我们需要获取这些组件的实例，会使用到ref属性来赋值，但最终只有首次为显示状态的组件才有实例返回、其余不管是隐藏还是后面根据状态值变更的显示始终拿不到实例（打印为null）；
2.个人解决方式
调整v-if、v-else-if、v-else属性，改为v-show来控制显隐都能获取到实例；
v-if、v-else-if、v-else：false修饰的组件不会载入页面中，会被删掉；
v-show：组件都会载入页面中，实际是控制其display属性显隐；
更新2023-11-22（最佳处理方式）：使用nextTick函数会在页面dom元素构建完成之后执行，这样实例就能拿到了。
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/213598
推荐阅读
相关标签
