编程 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高级程序设计 DOM学习笔记

Sep 10 Javascript

借助script进行Http跨域请求:JSONP实现原理及代码

Mar 19 Javascript

JS修改css样式style浅谈

May 06 Javascript

Node.js node-schedule定时任务隔多少分钟执行一次的方法

Feb 10 Javascript

jQuery实现的鼠标滑过弹出放大图片特效

Jan 08 Javascript

30分钟快速掌握Bootstrap框架

May 24 Javascript

JS跨域交互(jQuery+php)之jsonp使用心得

Jul 01 Javascript

AngularJS基础 ng-srcset 指令简单示例

Aug 03 Javascript

vue实现添加标签demo示例代码

Jan 21 Javascript

Vue下路由History模式打包后页面空白的解决方法

Jun 29 Javascript

node.js实现微信开发之获取用户授权

Mar 18 Javascript

javascript实现倒计时提示框

Mar 02 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中几个常用的魔术常量

2012/02/23 PHP

php实现的pdo公共类定义与用法示例

2017/07/19 PHP

浅谈php://filter的妙用

2019/03/05 PHP

PHP设计模式之数据访问对象模式（DAO）原理与用法实例分析

2019/12/12 PHP

JQuery防止退格键网页后退的实现代码

2012/03/23 Javascript

Android中资源文件(非代码部分)的使用概览

2012/12/18 Javascript

javascript对下拉列表框(select)的操作实例讲解

2013/11/29 Javascript

Node.js异步I/O学习笔记

2014/11/04 Javascript

Jsonp post 跨域方案

2015/07/06 Javascript

jQuery实现的AJAX简单弹出层效果代码

2015/11/26 Javascript

Bootstrap编写一个兼容主流浏览器的受众门户式风格页面

2016/07/01 Javascript

AngularJS 过滤器（自带和自建）详解

2016/09/19 Javascript

jQuery学习之DOM节点的插入方法总结

2017/01/22 Javascript

node.js中debug模块的简单介绍与使用

2017/04/25 Javascript

详解从新建vue项目到引入组件Element的方法

2017/08/29 Javascript

Vue+jquery实现表格指定列的文字收缩的示例代码

2018/01/09 jQuery

JS实现的简单下拉框联动功能示例

2018/05/11 Javascript

vue中进入详情页记住滚动位置的方法(keep-alive)

2018/09/21 Javascript

vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法

2018/10/22 Javascript

JS中比较两个Object数组是否相等方法实例

2019/11/11 Javascript

JS判断数组是否包含某元素实现方法汇总

2020/06/24 Javascript

[46:27]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第一局

2016/03/02 DOTA

Python数组条件过滤filter函数使用示例

2014/07/22 Python

Django中更新多个对象数据与删除对象的方法

2015/07/17 Python

python如何修改装饰器中参数

2018/03/20 Python

利用Python如何生成便签图片详解

2018/07/09 Python

详解Python中的各种转义符\n\r\t

2019/07/10 Python

django框架中ajax的使用及避开CSRF 验证的方式详解

2019/12/11 Python

面向对象编程的优势是什么

2015/12/17 面试题

请写出一段Python代码实现删除一个list里面的重复元素

2015/12/29 面试题

列车长先进事迹材料

2014/01/25 职场文书

个人委托书

2014/07/31 职场文书

求职简历自荐信怎么写

2015/03/26 职场文书

泰坦尼克号观后感

2015/06/04 职场文书

《田忌赛马》教学反思

2016/02/19 职场文书

2019下半年英语教师的教学工作计划（3篇）

2019/09/25 职场文书