编程 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左侧三级菜单导航实例代码

Sep 13 Javascript

JavaScript italics方法入门实例（把字符串显示为斜体）

Oct 17 Javascript

使用C++为node.js写扩展模块

Apr 22 Javascript

JavaScript实现按键精灵的原理分析

Feb 21 Javascript

Node.JS利用PhantomJs抓取网页入门教程

May 19 Javascript

JS中图片压缩的方法小结

Nov 14 Javascript

js实现以最简单的方式将数组元素添加到对象中的方法

Dec 20 Javascript

vue 界面刷新数据被清除 localStorage的使用详解

Sep 16 Javascript

vue组件tabbar使用方法详解

Nov 06 Javascript

webpack4.x下babel的安装、配置及使用详解

Mar 07 Javascript

JavaScript图像放大镜效果实现方法详解

Jun 28 Javascript

Vue实现可移动水平时间轴

Jun 29 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

支持oicq头像的留言簿(一)

2006/10/09 PHP

eaglephp使用微信api接口开发微信框架

2014/01/09 PHP

PHP多维数组转一维数组的简单实现方法

2015/12/23 PHP

ThinkPHP中Common/common.php文件常用函数功能分析

2016/05/20 PHP

TP5框架请求响应参数实例分析

2019/10/17 PHP

基于jquery的鼠标拖动效果代码

2012/05/30 Javascript

jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍

2013/04/07 Javascript

JSON传递bool类型数据的处理方式介绍

2013/09/18 Javascript

jQuery之ajax删除详解

2014/02/27 Javascript

JavaScript的21条基本知识点

2014/03/04 Javascript

对Js OOP编程创建对象的一些全面理解

2016/07/26 Javascript

使用proxy实现一个更优雅的vue【推荐】

2018/06/19 Javascript

js动态设置select下拉菜单的默认选中项实例

2018/08/21 Javascript

vue 引用自定义ttf、otf、在线字体的方法

2019/05/09 Javascript

Typescript 中的 interface 和 type 到底有什么区别详解

2019/06/18 Javascript

nodejs语言实现验证码生成功能的示例代码

2019/10/13 NodeJs

js实现GIF图片的分解和合成

2019/10/24 Javascript

JS浏览器BOM常见操作实例详解

2020/04/27 Javascript

vue实现移动端H5数字键盘组件使用详解

2020/08/25 Javascript

Python进阶篇之字典操作总结

2016/11/16 Python

Django卸载之后重新安装的方法

2017/03/15 Python

Python实现选择排序

2017/06/04 Python

使用python和Django完成博客数据库的迁移方法

2018/01/05 Python

python 批量添加的button 使用同一点击事件的方法

2019/07/17 Python

对django后台admin下拉框进行过滤的实例

2019/07/26 Python

Python实现银行账户资金交易管理系统

2020/01/03 Python

jupyternotebook 撤销删除的操作方式

2020/04/17 Python

PIL.Image.open和cv2.imread的比较与相互转换的方法

2020/06/03 Python

浅谈Html5多线程开发之WebWorkers

2018/05/02 HTML / CSS

HTML5 图片悬停放大的实现代码示例

2019/12/04 HTML / CSS

设置器与访问器的定义以及各自特点

2016/01/08 面试题

Servlet的生命周期

2013/08/25 面试题

小学生我的梦想演讲稿

2014/08/21 职场文书

张丽莉观后感

2015/06/16 职场文书

Java使用JMeter进行高并发测试

2021/11/23 Java/Android

Python基本的内置数据类型及使用方法

2022/04/13 Python