解决vue里碰到 $refs 的问题的方法


Posted in Javascript onJuly 13, 2017

本篇文章介绍了vue里碰到 $refs 的问题,分享给大家,希望能帮助大家解决问题

记录困惑自己一个简单的问题...(瞬间感觉官方文档的强大)

在自己做的一个项目中,遇到一个列表页,根据id能进入详情页(动态匹配路由),详情页是单独的一个组件,在这个详情的组件里,我想获取内容给你区域的高度,以此来判断对底部按钮显示的位置,但是在ref的时候,就是获取不到该标签,在mounted钩子函数里打印 this.$refs,也能看到这个值,但就就是点不出来(this.$refs这个对象里这个值,但是就是获取不到,我打印的是个假值?)

解决vue里碰到 $refs 的问题的方法

在mounted函数,打印的每次都是undefined。郁闷啊...为什么啊...

重新起个项目看看..

解决vue里碰到 $refs 的问题的方法

全部正常的打印,我擦...蒙蔽了...

好吧,网上看看有没有遇到类似的...看来是我自己比较挫,没有什么资源,看来还是自己的问题,这个时候,就是看文档了...

 解决vue里碰到 $refs 的问题的方法 

感觉自己没有没有什么错啊,是按上面做的...,但是作者特别强调了$refs 不是响应式的。额,想想...不对...,我那个组件好像就是响应式,或根据id来显示不同的数据。额,好吧.。这里ref只能在根组件,才能获取,其他的都获取不到。但是能打印出来,能看到...

虽然知道了浅显的原因所在,但是自己的问题没有解决,好吧,那就暴力点吧.直接操作dom。通过控制dom来获取页面的高度。

总结: 之前就有个人和我说过,可以把$refs 当做id来看,id是唯一的,是不变的。嗯,$refs 不是响应式的。 挺像...

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
Jan 16 Javascript
js 分栏效果实现代码
Aug 29 Javascript
读jQuery之四(优雅的迭代)
Jun 20 Javascript
php 中序列化和json使用介绍
Jul 08 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
Oct 15 Javascript
将form表单中的元素转换成对象的方法适用表单提交
May 02 Javascript
JSP基于Bootstrap分页显示实例解析
Jun 12 Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 Javascript
浅谈PDF.js使用心得
Jun 07 Javascript
原生JS实现留言板
Mar 26 Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 Javascript
jsonp跨域请求详解
Jul 13 #Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
Jul 13 #Javascript
JavaScript反弹动画效果的实现代码
Jul 13 #Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
Jul 13 #Javascript
详解vue-cli + webpack 多页面实例配置优化方法
Jul 13 #Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 #Javascript
js实现图片上传预览原理分析
Jul 13 #Javascript
You might like
php的ajax简单实例
2014/02/27 PHP
PHP中的output_buffering详细介绍
2014/09/27 PHP
PHP分页类集锦
2014/11/18 PHP
php通过session防url攻击方法
2014/12/10 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
PHP中include和require的区别实例分析
2017/05/07 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
javascript检测页面是否缩放的小例子
2013/05/16 Javascript
JavaScript中如何通过arguments对象实现对象的重载
2014/05/12 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
jquery $(document).ready()和window.onload的区别浅析
2015/02/04 Javascript
js点击选择文本的方法
2015/02/09 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
jQuery插件实现文件上传功能(支持拖拽)
2020/08/27 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
2017/07/08 jQuery
Angular中的$watch方法详解
2017/09/18 Javascript
vue中使用protobuf的过程记录
2018/10/26 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
2019/10/24 Javascript
修改NPM全局模式的默认安装路径的方法
2020/12/15 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
Python定时执行之Timer用法示例
2015/05/27 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
详解Python用户登录接口的方法
2019/04/17 Python
python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器实例
2019/06/17 Python
Python搭建HTTP服务过程图解
2019/12/14 Python
Python中使用socks5设置全局代理的方法示例
2020/04/15 Python
python实现猜数游戏(保存游戏记录)
2020/06/22 Python
PyCharm 解决找不到新打开项目的窗口问题
2021/01/15 Python
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
《鱼游到了纸上》教学反思
2014/02/20 职场文书
潘婷洗发水广告词
2014/03/14 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
创业计划书之家教托管
2019/09/25 职场文书