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

在自己做的一个项目中，遇到一个列表页，根据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. 数据库mysql之慢查询优化

    今天项目遇到一个问题:就是在公司test环境中执行sql查询语句很快,也就几百毫秒,但是放到sit环境中测试就要延迟至少1分钟左右. 网上找了很多原因,大多数都是说索引问题,我看了索引没问题,又重新建 ...

  2. TensorFlow笔记之常见七个参数

    对TensorFlow深度学习中常见参数的总结分析 神经网络中常见的参数有:初始学习率.学习率衰减率.隐藏层节点数量.迭代轮数.正则化系数.滑动平均衰减率.批训练数量七个参数. 对这七个参数,大部分情 ...

  3. JAVA核心问题（一）反射之引言 构造函数

    反射,简单来说,就是在运行时获取Class对象的所有属性和方法,无论公有私有.虽然是一个基础问题,在这里还是全面的记录一下,认真对待! 获取构造函数 构造函数大致分为两种,public和非public ...

  4. python数据结构之直接插入排序

    python数据结构之直接插入排序 #-*-encoding:utf-8-*- ''' 直接插入排序: 从序列的第二个元素开始,依次与前一个元素比较,如果该元素比前一个元素大, 那么交换这两个元素.该 ...

  5. Pattern Design - Strategy Pattern

    If you can disassemble code  and  you want to apply one method of an object in another object that t ...

  6. Alpha冲刺 - (8/10)

    Part.1 开篇 队名:彳艮彳亍团队 组长博客:戳我进入 作业博客:班级博客本次作业的链接 Part.2 成员汇报 组员1(组长)柯奇豪 过去两天完成了哪些任务 进一步优化代码,结合自己负责的部分修 ...

  7. json、txt、xlsx

    json:   json异于pickle,无乱码,各语言都支持,但Python各对象只直接接收int,str,(),[],{}.读入txt时只接受str,int变为str(int),()[]{}被js ...

  8. css3简单旋转

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>&l ...

  9. Itween的代码使用方法 - 01

    BB:Itween是真心不好用! - 透明度动画 void Start () { //键值对儿的形式保存iTween所用到的参数 Hashtable args = new Hashtable(); / ...

  10. 安装VS2017后打开项目提示 asp.net 4.0尚未web服务器注册

    Visual Studio 2017 出来了,手痒安装完成后打开原来的项目缺提示,asp.net 4.0尚未web服务器注册.郁闷了… 按照提示的方法,如何:将 ASP.NET Web 应用程序升级到 ...