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

jquery复选框CHECKBOX全选、反选

Aug 30 Javascript

javascript 学习之旅（3）

Feb 05 Javascript

js实现数组转换成json

Jun 26 Javascript

Extjs4.0 ComboBox如何实现三级联动

May 11 Javascript

jQuery实现页面评论栏中访客信息自动填写功能的方法

May 23 Javascript

教大家轻松制作Bootstrap漂亮表格（table）

Dec 13 Javascript

详解Vue 中 extend 、component 、mixins 、extends 的区别

Dec 20 Javascript

webpack4 升级迁移的实现

Sep 12 Javascript

Vue CLI3 开启gzip压缩文件的方式

Sep 30 Javascript

jQuery实现王者荣耀手风琴效果

Jan 17 jQuery

Vue 解决通过this.$refs来获取DOM或者组件报错问题

Jul 28 Javascript

vue实现一个获取按键展示快捷键效果的Input组件

Jan 13 Vue.js

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

IIS7.X配置PHP运行环境小结

2011/06/09 PHP

使用PHP curl模拟浏览器抓取网站信息

2013/10/28 PHP

PHP折半（二分）查找算法实例分析

2018/05/12 PHP

判断对象是否Window的实现代码

2012/01/10 Javascript

jquery实现带缩略图的全屏图片画廊效果实例

2015/06/25 Javascript

微信小程序页面跳转和数据传递实例详解

2017/01/19 Javascript

EsLint入门学习教程

2017/02/17 Javascript

vue.js移动端app实战1：初始配置详解

2017/07/24 Javascript

Vue插值、表达式、分隔符、指令知识小结

2018/10/12 Javascript

JQuery实现ajax请求的示例和注意事项

2018/12/10 jQuery

原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作

2019/02/27 jQuery

利用Electron简单撸一个Markdown编辑器的方法

2019/06/10 Javascript

使用imba.io框架得到比 vue 快50倍的性能基准

2019/06/17 Javascript

Vue移动端项目实现使用手机预览调试操作

2020/07/18 Javascript

Vue3.0的优化总结

2020/10/16 Javascript

Python中使用动态变量名的方法

2014/05/06 Python

python re模块findall()函数实例解析

2018/01/19 Python

对PyTorch torch.stack的实例讲解

2018/07/30 Python

Python使用pyshp库读取shapefile信息的方法

2018/12/29 Python

Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】

2019/03/11 Python

通过python扫描二维码/条形码并打印数据

2019/11/14 Python

python如何使用腾讯云发送短信

2020/09/17 Python

美国最大和最受信任的二手轮胎商店：Bestusedtires.com

2020/06/02 全球购物

党的群众路线教育实践活动党员个人整改措施

2014/10/27 职场文书

2014年安全工作总结范文

2014/11/13 职场文书

看上去很美观后感

2015/06/10 职场文书

电影雨中的树观后感

2015/06/15 职场文书

职工食堂管理制度

2015/08/06 职场文书

老干部局2015年度工作总结

2015/10/22 职场文书

《老人与海鸥》教学反思

2016/02/16 职场文书

导游词之广西漓江

2019/11/02 职场文书

深入理解Vue的数据响应式

2021/05/15 Vue.js

python opencv通过按键采集图片源码

2021/05/20 Python

MySQL中日期型单行函数代码详解

2021/06/21 MySQL

python析构函数用法及注意事项

2021/06/22 Python

Python中使用tkFileDialog实现文件选择、保存和路径选择

2022/05/20 Python