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

在自己做的一个项目中，遇到一个列表页，根据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. springmvc mybatis shiro构建cms系统

    开发语言: java.ios.android 部署平台: linux.window jdk版本:JDK1.7以上版本 开发工具: eclipse.idea等 服务器中间件:Tomcat 6.7.Jbo ...

  2. linux 查看信息－进程&用户&服务&程序

    进程 1.查看所有进程 2.实时显示进程状态 用户 1.查看活动用户 2.查看登录日志 3.查看系统所有用户 4.查看系统所有组 5.查看当前用户的计划任务 服务 1.列出所有系统服务 2.列出所有启 ...

  3. KD-树（上）

    来自于https://zhuanlan.zhihu.com/p/23966698 思路篇 导语:kd 树是一种二叉树数据结构,可以用来进行高效的 kNN 计算.kd 树算法偏于复杂,本篇将先介绍以二叉 ...

  4. Linux下配置yum

    [一]用本地文件创建本地yum源 1. 创建iso存放目录和挂载目录 mkdir /mnt/iso mkdir /mnt/cdrom 2. 将iso镜像文件上传到/mnt/iso文件夹下 3. 将/m ...

  5. js后加版本号

    页面引入两个js文件 <script charset="utf-8" src="mjs/randomimage.js?v=01291"></s ...

  6. 循环队列 & 栈的共用空间

    循环队列 非常好的数据结构,充分利用率空间,可以用于网络端存储socket消息! /*************************************** 作者: 未闻花语 版本: v1.0 ...

  7. IntelliJ IDEA 2018.1.3 破解方法之一

    IntelliJ IDEA 2018.1.3 破解方法之一 声明:如果资金充足请购买正版! NO1 下载安装IntelliJ IDEA 企业版 NO2 下载jar包 (1)下载地址:http://id ...

  8. 统计C/C++代码行数

    近日在写一个统计项目中C/C++文件(后缀名:C/CPP/CC/H/HPP文件)代码行数的小程序.给定包含C/C++代码的目录,统计目录里所有C/C++文件的总代码行数.有效代码行数.注释行数.空白行 ...

  9. 理解Time-Wait

    What is it? TIME-WAIT状态的主要作用在于TCP连接的拆除阶段.拆除一个TCP连接通常需要交换4个segment,如下图所示: Host1上的应用程序关闭了自己这一端的连接,使得TC ...

  10. App设计模式纵横谈（1）

    对我的文章和培训课程感兴趣的可以加我微信16230091进行关注. —————————————————————————————————— 今天聊聊我沉淀比较久的一门技术,设计模式.这里是第一篇,算是概 ...