编程 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获取当月最后一天实例代码

Nov 19 Javascript

鼠标滚轮改变图片大小的示例代码

Nov 20 Javascript

jQuery实现切换页面过渡动画效果

Oct 29 Javascript

对象转换为原始值的实现方法

Jun 06 Javascript

基于jQuery实现顶部导航栏功能

Dec 27 Javascript

AngularJS2中一种button切换效果的实现方法（二）

Mar 27 Javascript

jquery实现图片轮播器

May 23 jQuery

详解基于 axios 的 Vue 项目 http 请求优化

Sep 04 Javascript

一步步教你利用Canvas对图片进行处理

Sep 19 Javascript

小程序文字跑马灯效果

Dec 28 Javascript

微信小程序新闻网站详情页实例代码

Jan 10 Javascript

详解微信小程序轨迹回放实现及遇到的坑

Feb 02 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

JAVA/JSP学习系列之二

2006/10/09 PHP

php使用PDO方法详解

2014/12/27 PHP

PHP文件缓存类示例分享

2015/01/30 PHP

php检测url是否存在的方法

2015/04/14 PHP

使用PHP和JavaScript判断请求是否来自微信内浏览器

2015/08/18 PHP

php 截取GBK文档某个位置开始的n个字符方法

2017/03/08 PHP

PHP7中I/O模型内核剖析详解

2019/04/14 PHP

setTimeout 不断吐食CPU的问题分析

2009/04/01 Javascript

JavaScript中的运算符种类及其规则介绍

2013/09/26 Javascript

利用jquery.qrcode在页面上生成二维码且支持中文

2014/02/12 Javascript

Javascript让DEDECMS告别手写Tag

2014/09/01 Javascript

js解决movebox移动问题

2016/03/29 Javascript

微信小程序本作用域下调用全局JS详解及实例

2017/02/22 Javascript

JS中this的指向以及call、apply的作用

2018/05/06 Javascript

JavaScript实现预览本地上传图片功能完整示例

2019/03/08 Javascript

一百行JS代码实现一个校验工具

2019/04/30 Javascript

微信小程序实现购物车功能

2020/11/18 Javascript

TensorFlow如何实现反向传播

2018/02/06 Python

Python3.6连接Oracle数据库的方法详解

2018/05/18 Python

Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解

2018/09/04 Python

使用 pytorch 创建神经网络拟合sin函数的实现

2020/02/24 Python

使用Django xadmin 实现修改时间选择器为不可输入状态

2020/03/30 Python

基于python检查矩阵计算结果

2020/05/21 Python

Python定时任务APScheduler安装及使用解析

2020/08/07 Python

为2021年的第一场雪锦上添花:用matplotlib绘制雪花和雪景

2021/01/05 Python

HTML5视频支持检测(检查浏览器是否支持视频播放)

2013/06/08 HTML / CSS

美国折扣地毯销售网站：Rugs.com

2020/03/27 全球购物

商务英语毕业生自荐信范文

2013/11/08 职场文书

经典大学生求职信范文

2014/01/06 职场文书

集团薪酬管理制度

2014/01/13 职场文书

《罗布泊，消逝的仙湖》教学反思

2014/03/01 职场文书

实习计划书范文

2015/01/16 职场文书

行政上诉状范文

2015/05/23 职场文书

2016年春季开学典礼新闻稿

2015/11/25 职场文书

情侣餐厅的创业计划书范本！

2019/07/26 职场文书

详解MySQL的Seconds_Behind_Master

2021/05/18 MySQL