编程 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 06 Javascript

js键盘上下左右键怎么触发function(实例讲解)

Dec 14 Javascript

深入理解JavaScript系列（26）：设计模式之构造函数模式详解

Mar 03 Javascript

javascript白色简洁计算器

May 04 Javascript

js仿3366小游戏选字游戏

Apr 14 Javascript

Javascript基础知识盲点总结之函数

May 15 Javascript

微信小程序自定义组件

Aug 16 Javascript

Vue-Access-Control 前端用户权限控制解决方案

Dec 01 Javascript

Vue中使用vee-validate表单验证的方法

May 09 Javascript

详解ES7 Decorator 入门解析

Feb 18 Javascript

用Fundebug插件记录网络请求异常的方法

Feb 21 Javascript

javascript自定义日期比较函数用法示例

Jul 22 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

一个odbc连mssql分页的类

2006/10/09 PHP

php 保留字列表

2012/10/04 PHP

PHP基于文件存储实现缓存的方法

2015/07/20 PHP

PHP后台微信支付和支付宝支付开发

2017/04/28 PHP

JAVASCRIPT THIS详解面向对象

2009/03/25 Javascript

IE 条件注释详解总结（附实例代码）

2009/08/29 Javascript

js getBoundingClientRect() 来获取页面元素的位置

2010/11/25 Javascript

用于deeplink的js方法(判断手机是否安装app)

2014/04/02 Javascript

js生成缩略图后上传并利用canvas重绘

2014/05/15 Javascript

JQuery球队选择实例

2015/05/18 Javascript

JS获取月份最后天数、最大天数与某日周数的方法

2015/12/08 Javascript

jQuery Mobile页面返回不需要重新get

2016/04/26 Javascript

AngularJS Bootstrap详细介绍及实例代码

2016/07/28 Javascript

JS 获取HTML标签内的子节点的方法

2016/09/21 Javascript

JavaScript获取键盘按键的键码(参照表)

2017/01/10 Javascript

jQuery插件HighCharts实现气泡图效果示例【附demo源码】

2017/03/13 Javascript

使用Math.max,Math.min获取数组中的最值实例

2017/04/25 Javascript

JS实现简单获取最近7天和最近3天日期的方法

2018/04/18 Javascript

vue-cli项目代理proxyTable配置exclude的方法

2018/09/20 Javascript

jquery实现动态添加附件功能

2018/10/23 jQuery

给localStorage设置一个过期时间的方法分享

2018/11/06 Javascript

如何基于原生javaScript生成带图片的二维码

2019/11/21 Javascript

Python黑帽编程 3.4 跨越VLAN详解

2016/09/28 Python

解决python matplotlib imshow无法显示的问题

2018/05/24 Python

python使用正则筛选信用卡

2019/01/27 Python

Python地图绘制实操详解

2019/03/04 Python

tensorboard实现同时显示训练曲线和测试曲线

2020/01/21 Python

德国骆驼商店：ActiveFashionWorld

2017/11/18 全球购物

2014年公司迎新年活动方案

2014/02/24 职场文书

幼儿园大班毕业教师寄语

2014/04/03 职场文书

会议欢迎标语

2014/06/30 职场文书

党在我心中演讲稿

2014/09/02 职场文书

2015年医德医风工作总结

2015/04/02 职场文书

文明医院的标语集锦！

2019/07/24 职场文书

SQL中的三种去重方法小结

2021/11/01 SQL Server

VUE解决跨域问题Access to XMLHttpRequest at

2022/05/06 Vue.js