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

在自己做的一个项目中，遇到一个列表页，根据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. python 数据可视化（matplotlib）

    matpotlib 官网 :https://matplotlib.org/index.html matplotlib 可视化示例:https://matplotlib.org/gallery/inde ...

  2. C++ 提取网页内容系列之三

    标 题: C++ 提取网页内容系列作 者: itdef链 接: http://www.cnblogs.com/itdef/p/4171659.html 欢迎转帖 请保持文本完整并注明出处 这次继续下载 ...

  3. trinitycore 魔兽服务器源码分析(三) 多线程相关

    先看LockedQueue.h template <class T, typename StorageType = std::deque<T> >class LockedQue ...

  4. 【APP测试（Android）】－－硬件测试

  5. OpenCV+Qt+CMake安装+十种踩坑

    平台:win10 x64+opencv-3.4.1 + qt-x86-5.9.0 + cmake3.13.4 x64 OpenCV+Qt+CMake安装,及目前安装完后打包:mingw32-make时 ...

  6. javascript day 02

    js-day02 1.数据类型转换2.函数3.分支结构*******************************1.数据类型转换 数据类型:number,string,boolean,null,u ...

  7. js 时间戳转日期

    timestampToTime(10位时间戳) function timestampToTime(timestamp) { var date = new Date(timestamp * 1000); ...

  8. LOJ-10102（桥的判断）

    题目链接:传送门 思路:找桥就行了,条件是num[v]<low[u],pre!=v; #include<iostream> #include<cstdio> #inclu ...

  9. python模块：xml.dom.minidom

    """Simple implementation of the Level 1 DOM. Namespaces and other minor Level 2 featu ...

  10. lambda 匿名函数

    # 普通python函数 def func(a,b,c): return a+b+c print func(1,2,3) # 返回值为6 # lambda匿名函数 f = lambda a,b,c:a ...