编程 Javascript

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

Posted in Javascript onJuly 13, 2017

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

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

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

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

重新起个项目看看..

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

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

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

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

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

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

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

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

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

- Author -

刈懋

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js控制框架刷新

Aug 01 Javascript

js 控制图片大小核心讲解

Oct 09 Javascript

Jquery 监视按键，按下回车键触发某方法的实现代码

May 11 Javascript

jquery表单验证插件（jquery.validate.js）的3种使用方式

Mar 28 Javascript

纯CSS3代码实现滑动开关效果

Aug 19 Javascript

剖析Node.js异步编程中的回调与代码设计模式

Feb 16 Javascript

浅析JS异步加载进度条

May 05 Javascript

BootStrap智能表单实战系列(十一)级联下拉的支持

Jun 13 Javascript

浅谈React碰到v-if

Nov 04 Javascript

JavaScript数组、json对象、eval()函数用法实例分析

Feb 21 Javascript

基于layui的table插件进行复选框联动功能的实现方法

Sep 19 Javascript

vant 解决tab切换插件标题样式自定义的问题

Nov 13 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写入WRITE编码为UTF8的文件的实现代码

2008/07/07 PHP

ThinkPHP之getField详解

2014/06/20 PHP

php使用Jpgraph绘制饼状图的方法

2015/06/10 PHP

php视频拍照上传头像功能实现代码分享

2015/10/08 PHP

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例

2017/09/15 PHP

php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法

2018/02/06 PHP

PHP设计模式之工厂模式定义与用法详解

2018/04/03 PHP

PHP常用函数之根据生日计算年龄功能示例

2019/10/21 PHP

JavaScript中使用正则匹配多条，且获取每条中的分组数据

2010/11/30 Javascript

jquery中通过父级查找进行定位示例

2013/06/28 Javascript

JS操作Cookies的小例子

2013/10/15 Javascript

jQuery截取指定长度字符串的实现原理及代码

2014/07/01 Javascript

Javascript aop(面向切面编程)之around(环绕)分析

2015/05/01 Javascript

js实现卡片式项目管理界面UI设计效果

2015/12/08 Javascript

Highcharts使用简例及异步动态读取数据

2015/12/30 Javascript

原生JS简单实现ajax的方法示例

2016/11/29 Javascript

简单谈谈gulp-changed插件

2017/02/21 Javascript

Bootstrap下拉菜单Dropdowns的实现代码

2017/03/17 Javascript

基于JavaScript实现移动端无限加载分页

2017/03/27 Javascript

详解vuejs几种不同组件（页面）间传值的方式

2017/06/01 Javascript

JS插件clipboard.js实现一键复制粘贴功能

2020/12/04 Javascript

Postman的下载及安装教程详解

2018/10/16 Javascript

js中!和!!的区别与用法

2020/05/09 Javascript

python list使用示例 list中找连续的数字

2014/01/27 Python

Python实现的几个常用排序算法实例

2014/06/16 Python

python 顺时针打印矩阵的超简洁代码

2018/11/14 Python

对Python闭包与延迟绑定的方法详解

2019/01/07 Python

python远程邮件控制电脑升级版

2019/05/23 Python

python写入数据到csv或xlsx文件的3种方法

2019/08/23 Python

手把手教你用Django执行原生SQL的方法

2021/02/18 Python

LivingSocial爱尔兰：爱尔兰本地优惠

2018/08/10 全球购物

实习自我鉴定

2013/12/15 职场文书

师范学院教师自荐书

2014/01/31 职场文书

小学教师先进事迹材料

2014/12/15 职场文书

中国合伙人观后感

2015/06/02 职场文书

治理商业贿赂工作总结

2015/08/10 职场文书