编程 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 indexOf函数使用说明

Jul 03 Javascript

jQuery实现注册时选择阅读条款左右移动

Apr 11 Javascript

jquery常用操作小结

Jul 21 Javascript

js实现横向百叶窗效果网页切换动画效果的方法

Mar 02 Javascript

基于JavaScript实现瀑布流效果

Mar 29 Javascript

浅谈js-FCC算法Friendly Date Ranges(详解)

Apr 10 Javascript

详解使用angular的HttpClient搭配rxjs

Sep 01 Javascript

原生javascript实现的全屏滚动功能示例

Sep 19 Javascript

详解开发react应用最好用的脚手架 create-react-app

Apr 24 Javascript

JavaScript实现的鼠标跟随特效示例【2则实例】

Dec 22 Javascript

对于防止按钮重复点击的尝试详解

Apr 22 Javascript

微信小程序如何实现radio单选框单击打勾和取消

Jan 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 注册时输入信息验证器的实现详解

2013/07/05 PHP

php实现的双色球算法示例

2017/06/20 PHP

jquery实现兼容浏览器的图片上传本地预览功能

2013/10/14 Javascript

javascript 实现字符串反转的三种方法

2013/11/23 Javascript

关于onchange事件在IE和FF下的表现及解决方法

2014/03/08 Javascript

判断iframe里的页面是否加载完成

2014/06/06 Javascript

extjs 如何给column 加上提示

2014/07/29 Javascript

Jquery焦点图实例代码

2014/11/25 Javascript

angularjs基础教程

2014/12/25 Javascript

javascript白色简洁计算器

2015/05/04 Javascript

JavaScript实现将数组数据添加到Select下拉框的方法

2015/08/21 Javascript

JS数组排序方法实例分析

2016/12/16 Javascript

详解vue组件化开发-vuex状态管理库

2017/04/10 Javascript

angularJS模态框$modal实例代码

2017/05/27 Javascript

Django+Vue.js搭建前后端分离项目的示例

2017/08/07 Javascript

Angular 向组件传递模板的两种方法

2018/02/23 Javascript

Vue实现active点击切换方法

2018/03/16 Javascript

JavaScript基础教程之如何实现一个简单的promise

2018/09/11 Javascript

Vue中的循环及修改差值表达式的方法

2019/08/29 Javascript

highcharts.js数据绑定方式代码实例

2019/11/13 Javascript

重置Redux的状态数据的方法实现

2019/11/18 Javascript

js实现3D旋转相册

2020/08/02 Javascript

[04:14]从西雅图到上海——玩家自制DOTA2主题歌曲应援TI9

2019/07/11 DOTA

Android基于TCP和URL协议的网络编程示例【附demo源码下载】

2018/01/23 Python

python爬虫之线程池和进程池功能与用法详解

2018/08/02 Python

TensorFlow2.0使用keras训练模型的实现

2021/02/20 Python

关于webview适配H5上传照片或者视频文件的方法

2020/11/04 HTML / CSS

联想西班牙官网：Lenovo西班牙

2018/08/28 全球购物

Hello Molly美国：女性时尚在线

2019/08/26 全球购物

求职自荐信

2013/12/14 职场文书

热爱祖国演讲稿

2014/05/04 职场文书

红色旅游心得体会

2014/09/03 职场文书

八一建军节主持词

2015/07/01 职场文书

三严三实·严以修身心得体会

2016/01/15 职场文书

求职自我评价参考范文

2019/05/16 职场文书

nginx rewrite功能使用场景分析

2022/05/30 Servers