编程 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 相关文章推荐

Javascript中暂停功能的实现代码

Mar 04 Javascript

JavaScript中出现乱码的处理心得

Dec 24 Javascript

jQuery对象和Javascript对象之间转换的实例代码

Mar 20 Javascript

深入理解JavaScript系列（25）：设计模式之单例模式详解

Mar 03 Javascript

javascript数组随机排序实例分析

Jul 22 Javascript

微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】

Nov 25 Javascript

JS异步文件分片断点上传的实现思路

Dec 25 Javascript

HTML5 js实现拖拉上传文件功能

Nov 20 Javascript

vue实现动态添加数据滚动条自动滚动到底部的示例代码

Jul 06 Javascript

微信小程序有旋转动画效果的音乐组件实例代码

Aug 22 Javascript

vue实现类似淘宝商品评价页面星级评价及上传多张图片功能

Oct 29 Javascript

vue 中使用 watch 出现了如下的报错的原因分析

May 21 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开发不能违背的安全规则过滤用户输入

2011/05/01 PHP

JavaScript的目的分析

2007/01/05 Javascript

拖拉表格的JS函数

2008/11/20 Javascript

非主流的textarea自增长实现js代码

2011/12/20 Javascript

JavaScript实现鼠标滑过处生成气泡的方法

2015/05/16 Javascript

JS 对象(Object)和字符串(String)互转方法

2016/05/20 Javascript

JavaScript中对JSON对象的基本操作示例

2016/05/21 Javascript

微信小程序后台https域名绑定和免费的https证书申请详解

2016/11/10 Javascript

jsp 自动编译机制详细介绍

2016/12/01 Javascript

利用n 升级工具升级Node.js版本及在mac环境下的坑

2017/02/15 Javascript

Angular限制input框输入金额（是小数的话只保留两位小数点）

2017/07/13 Javascript

vue和react等项目中更简单的实现展开收起更多等效果示例

2018/02/22 Javascript

JS实现的JSON序列化操作简单示例

2018/07/02 Javascript

15分钟上手vue3.0(小结)

2020/05/20 Javascript

在vue中axios设置timeout超时的操作

2020/09/04 Javascript

vue 单页应用和多页应用的优劣

2020/10/22 Javascript

基于vue的video播放器的实现示例

2021/02/19 Vue.js

Python描述器descriptor详解

2015/02/03 Python

Python中关于字符串对象的一些基础知识

2015/04/08 Python

python获取指定时间差的时间实例详解

2017/04/11 Python

python2与python3中关于对NaN类型数据的判断和转换方法

2018/10/30 Python

基于Python爬虫采集天气网实时信息

2020/06/05 Python

CSS3线性渐变简单实现以及该属性在浏览器中的不同

2012/12/12 HTML / CSS

HTML5样式控制示例代码

2013/11/27 HTML / CSS

澳大利亚最好的厨具店：Kitchen Warehouse

2018/03/13 全球购物

项目经理岗位职责

2013/11/11 职场文书

校园摄影活动策划方案

2014/02/05 职场文书

大堂副理的岗位职责范文

2014/02/17 职场文书

机关工会开展学习雷锋活动总结

2014/03/01 职场文书

横幅标语大全

2014/06/17 职场文书

房产协议书范本2014

2014/09/30 职场文书

公安派出所所长四风问题个人对照检查材料

2014/10/04 职场文书

四风问题自查自纠工作情况报告

2014/10/28 职场文书

客户答谢会致辞

2015/01/20 职场文书

2019最新婚庆对联集锦！

2019/07/10 职场文书

话题作文之自信作文

2019/11/15 职场文书