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

学习YUI.Ext 第六天--关于树TreePanel(Part 1)

Mar 10 Javascript

动态样式类封装JS代码

Sep 02 Javascript

javascript:void(0)使用探讨

Aug 27 Javascript

JavaScript中的console.time()函数详细介绍

Dec 29 Javascript

jquery实现弹出层登录和全屏层注册特效

Aug 28 Javascript

javascript中Number的方法小结

Nov 21 Javascript

bootstrap table插件的分页与checkbox使用详解

Jul 23 Javascript

通过vue-cli来学习修改Webpack多环境配置和发布问题

Dec 22 Javascript

AjaxUpLoad.js实现文件上传功能

Mar 02 Javascript

D3.js实现简洁实用的动态仪表盘的示例

Apr 04 Javascript

浅析js实现网页截图的两种方式

Nov 01 Javascript

javascript前端和后台进行数据交互方法示例

Aug 07 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的输入输出流

2007/02/14 PHP

jquery.messager.js插件导致页面抖动的解决方法

2013/07/14 Javascript

node.js中的url.parse方法使用说明

2014/12/10 Javascript

js判断文本框剩余可输入字数的方法

2015/02/04 Javascript

angular.bind使用心得

2015/10/26 Javascript

jQuery实现对无序列表的排序功能(附demo源码下载)

2016/06/25 Javascript

JQuery实现DIV其他动画效果的简单实例

2016/09/18 Javascript

浅谈jQuery双事件多重加载的问题

2016/10/05 Javascript

BootStrap modal模态弹窗使用小结

2016/10/26 Javascript

Angular1.x自定义指令实例详解

2017/03/01 Javascript

JavaScript学习笔记之函数记忆

2017/09/06 Javascript

利用jsonp解决js读取本地json跨域的问题

2018/12/11 Javascript

jsonp实现百度下拉框功能的方法分析

2019/05/10 Javascript

[02:46]完美世界DOTA2联赛PWL DAY4集锦

2020/11/03 DOTA

使用Python进行稳定可靠的文件操作详解

2013/12/31 Python

Python多进程通信Queue、Pipe、Value、Array实例

2014/11/21 Python

Python的mysql数据库的更新如何实现

2017/07/31 Python

python爬虫_自动获取seebug的poc实例

2017/08/05 Python

使用TensorFlow实现SVM

2018/09/06 Python

Python中一般处理中文的几种方法

2019/03/06 Python

从列表或字典创建Pandas的DataFrame对象的方法

2019/07/06 Python

简单了解python的一些位运算技巧

2019/07/13 Python

Python使用lambda表达式对字典排序操作示例

2019/07/25 Python

使用TFRecord存取多个数据案例

2020/02/17 Python

Python基于类路径字符串获取静态属性

2020/03/12 Python

在vscode中启动conda虚拟环境的思路详解

2020/12/25 Python

css3 transform属性详解

2014/09/30 HTML / CSS

Web前端页面跳转并取到值

2017/04/24 HTML / CSS

HTML5添加禁止缩放功能

2017/11/03 HTML / CSS

乌克兰设计师和品牌的服装：Love&Live

2020/04/14 全球购物

主管职责范文

2013/11/09 职场文书

金融专业大学生职业生涯规划范文

2014/01/16 职场文书

婚庆司仪主持词

2014/03/15 职场文书

pytorch中[..., 0]的用法说明

2021/05/20 Python

Python破解极验滑动验证码详细步骤

2021/05/21 Python

解决Pytorch中关于model.eval的问题

2021/05/22 Python