记录困惑自己一个简单的问题...(瞬间感觉官方文档的强大)

在自己做的一个项目中，遇到一个列表页，根据id能进入详情页（动态匹配路由），详情页是单独的一个组件，在这个详情的组件里，我想获取内容给你区域的高度，以此来判断对底部按钮显示的位置，但是在ref的时候，就是获取不到该标签，在mounted钩子函数里打印 this.$refs，也能看到这个值，但就就是点不出来（this.$refs这个对象里这个值，但是就是获取不到，我打印的是个假值?）

 
　　在mounted函数，打印的每次都是undefined。郁闷啊...为什么啊...
重新起个项目看看..
全部正常的打印,我擦...蒙蔽了...
好吧，网上看看有没有遇到类似的...看来是我自己比较挫，没有什么资源，看来还是自己的问题，这个时候，就是看文档了...
 
　　感觉自己没有没有什么错啊,是按上面做的...，但是作者特别强调了$refs 不是响应式的。额，想想...不对...,我那个组件好像就是响应式，或根据id来显示不同的数据。额，好吧.。这里ref只能在根组件，才能获取，其他的都获取不到。但是能打印出来，能看到...　　
　　虽然知道了浅显的原因所在，但是自己的问题没有解决，好吧，那就暴力点吧.直接操作dom。通过控制dom来获取页面的高度。
　　总结： 之前就有个人和我说过，可以把$refs 当做id来看，id是唯一的，是不变的。嗯，$refs 不是响应式的。 挺像... 
 

vue里碰到 $refs 的问题的更多相关文章

  1. vue里ref ($refs)用法

    ref 有三种用法: 1.ref 加在普通的元素上,用this.ref.name 获取到的是dom元素 2.ref 加在子组件上,用this.ref.name 获取到的是组件实例,可以使用组件的所有方 ...

  2. 关于vue里的$refs属性

    vuejs的极大程度的帮助减少了对dom的操作,他主要通过添加ref属性,但是当获取this.$refs属性时,稍有不注意就会输出undefined导致我们对dom节点的操作报错. this.$ref ...

  3. this.$refs.tabs.activeKey ref就是vue里面的id

    this.$refs.tabs.activeKey ref就是vue里面的id

  4. 了解vue里的Runtime Only和Runtime+Compiler

    转自:了解vue里的Runtime Only和Runtime+Compiler 扩展文章:Vue 2.0如何仅使用Runtime-only Build构建项目? 可以看到有两种版本: Runtime ...

  5. vue里在自定义的组件上定义的事件

    事件分为原生事件和自定义事件. vue里在自定义的组件上定义的事件,都被认为是自定义事件,必须用$emit()来触发. 这也是子组件向父传值的原理. 如果想作为原生事件,需要在原生事件后面加上.nat ...

  6. vue里的渲染以及computed的好处

    如果vue里的某个methods函数执行,导致页面重新渲染,那么所有页面渲染相关的methods函数会重新执行以及时的渲染页面 但是大量函数的重新没有必要的执行会导致性能的下降, 此时如果把没有必要再 ...

  7. vue里的数据

    背景: 一个项目完工在即,鉴于此,前端使用了vue,写下此栏,以供日后翻阅, 会涉及到我所运用到的vue相关知识,需要一定的js基础. 默认vue的single-file-components(单文件 ...

  8. typescript无法识别vue中的$refs

    例如:vue-fullscreen <template> <div class="Test"> <fullscreen ref="fulls ...

  9. 深入解析Vue里函数的调用顺序介绍

    今天为大家分享一篇对vue里函数的调用顺序介绍,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. method用来定义方法的,比如你@click=& ...

随机推荐

  1. Minimum Increment to Make Array Unique LT945

    Given an array of integers A, a move consists of choosing any A[i], and incrementing it by 1. Return ...

  2. 201771010142 张燕《面向对象程序设计（java）》第三周学习总结

    实验三 Java基本程序设计(2) 实验时间 2018-9-13 1.实验目的与要求 (1)进一步掌握Eclipse集成开发环境下java程序开发基本步骤: (2)熟悉PTA平台线上测试环境: (3) ...

  3. 手机端table表格bug

    table表格在手机端有一个小小的bug,就是td有一个右边线,解决办法可已给tr加一个背景色就行,或者table都行,完美解决

  4. 基于OpenCV的图书扫描识别程序开发

    1.AndroidStudio环境配置 https://www.cnblogs.com/little-monkey/p/7162340.html

  5. ABP框架系列之四十八：(Specifications-规范)

    Introduction Specification pattern is a particular software design pattern, whereby business rules c ...

  6. Win7 VS2015 NASM汇编语言环境配置

    参考了以下两个博客文章 http://blog.csdn.net/x356982611/article/details/51260841 http://www.cnblogs.com/antonioz ...

  7. Maths | 离散K-L变换/ 主成分分析法

    目录 1. 概述 2. K-L变换方法和原理推导 2.1. 向量分解 2.2. 向量估计及其误差 2.3. 寻找最小误差对应的正交向量系 3. K-L变换高效率的本质 4. PCA在编.解码应用上的进 ...

  8. 手动封装on，emit，off

    on 绑定 emit 触发 off 解绑 //存放事件eventList = {key:valhandle:[]} 1对多on(eventName,callback);handle:-------N多 ...

  9. JSP标准标签库：JSTL

    JSTL(JSP Standard Tag Library),JSP标准标签库,可以嵌入在jsp页面中使用标签的形式完成业务逻辑等功能. jstl出现的目的同el一样也是要代替jsp页面中的脚本代码. ...

  10. linux 软件安装篇

    在linux下安装软件,不像windows一样,下一步下一步安装,但是也有很方便的方式.也有自定义的安装方式,总体来说,套路还不算太深,但是要实践才能出真知哦! linux版本有很多,但是大部分命令都 ...