ref是被用来给元素或子组件注册引用信息。引用信息将注册在父组件的 $refs 对象身上。如果在普通的DOM元素身上使用，引用指向就是DOM元素；如果用在子组件身上，引用就是指向组件实例。

当v-for用于元素或组件身上时，引用循序就是将包含DOM节点或组件实例的数组。

关于ref注册时间的重要说明：因为ref本身就是作为渲染结果被创建的，在初始渲染的时候不能被范文-他们还不存在! $ref也不是响应式的，因此你不应该试图它用在模板中做数据绑定。

补充一点：

　　如果你一定要在钩子函数 created()   或者mounted()使用$refs拿到dom元素或者实例，就应该配合使用 this.$nextTick( () => {在此处拿})，这个函数非常的好用呦！！！

ref、refs使用的注意事项的更多相关文章

  1. Git Push:error: Couldn't set refs/remotes/origin/master;error: update_ref failed for ref 'refs/remot

    作者:荒原之梦 原文链接:http://zhaokaifeng.com/?p=543 今天使用Git Push代码时产生错误: Rename from 'XXXX/.git/refs/remotes/ ...

  2. error: cannot lock ref 'refs/remotes/origin/master': unable to resolve reference 'refs/remotes/origin/master': reference broken...

    之前在自己的项目中添加了一个分支,然后做了一些操作,比如同步本地的分支情况到远程仓库中,然后在远程仓库中完成分支合并,以及 Pull request 等等操作,后来,在本地仓库中进行 git fetc ...

  3. 项目记事【Git】：git pull 出错 error: cannot lock ref 'refs/remotes/origin/feature/hy78861': is at d4244546c8cc3827491cc82878a23c708fd0401d but expected a6a00bf2e92620d0e06790122bab5aeee01079bf

    今天 pull 代码的时候碰到以下问题(隐去了一些公司敏感信息): XXX@CN-00012645 MINGW64 /c/Gerrard/Workspace/XXX (master) $ git pu ...

  4. Vue.js中ref ($refs)用法举例总结

    原文地址:http://www.cnblogs.com/xueweijie/p/6907676.html <div id="app"> <input type=& ...

  5. vue里ref ($refs)用法

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

  6. Vue 中的 ref $refs

    ref 被用来给DOM元素或子组件注册引用信息.引用信息会根据父组件的 $refs 对象进行注册.如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例 注意:只要想 ...

  7. Vue父子组件传值$parent , ref,$refs，props大总结

    子组件: <template> <div class="child"> <slot name='meiyong'></slot> & ...

  8. error: dst ref refs/heads/zhCN_v0.13.1 receives from more than one src.

    http://segmentfault.com/q/1010000000257571 想要把本地的分支推送到远端 git push chucklu zhCN_v0.13.1 zhCN_v0.13.1 ...

  9. Git Pull Failed: cannot lock ref 'refs/remotes/origin/xxxxxxxx': unable to resolve ref

    1.xxxxxxxx代表目录名称,我要pull的目录是supman_creditmall_v5: 2.从代码库中pull代码时报这个错误,代码pull失败: 3.解决办法,看下图,删除文件后再pull ...

随机推荐

  1. Quartz使用及注意事项

    Quartz使用及注意事项 前提:目前由于公司业务决定,大量使用Quartz,每天固定的时间点执行相应的业务逻辑,,几十个时间点应该是有的,某一个时间点如果没有执行带来的问题是巨大的.Quartz的稳 ...

  2. ASTreeView Demo:Add, Edit & Delete nodes

    http://www.jinweijie.com/ http://www.astreeview.com/astreeviewdemo/astreeviewdemo1.aspx 選擇節點: <sc ...

  3. es6新语法的使用

    1.声明变量: let 声明变量 作用域代码块作用域{} 尽在模块 先使用后声明 会报错 { let a= 12; alert(a) } let 不允许重复声明同一个变量 const 声明是一个常量, ...

  4. wxpython 简单表格控件

    import wx, wx.grid class GridData(wx.grid.PyGridTableBase): _cols = "a b c".split() _data ...

  5. Picklist的配置

    Picklist包括静态的Picklist和动态的Picklist.静态Picklist的配置 1.首先在All Projects中,选中Picklist,复制一个Pistlist进行修改.Name( ...

  6. BIEE入门（一）架构

    BIEE作为Oracle的新的商业智能平台企业版,起源于Oracle所收购的Siebel公司,BIEE原来叫做Siebel Analytic,但是Siebel也不是它的发明者,它是Siebel在200 ...

  7. lucene4.6版本配置

    1.官网下载lucene的最新版本,解压后会看到很多文件,我们现在需要: E:\lucene-4.6.0\demo\lucene-demo-4.6.0.jar; E:\lucene-4.6.0\cor ...

  8. Markdown 使用方法总结

    标题: [#]  表示一级标题 [##] 表示二级标题 [###]表示三级标题 引用块:在引用文本前插入 Tab,具体几个 Tab 根据文本所处的位置不同而不同 列表:[ - ]即一个空格加上一个中划 ...

  9. JQUERY实现点击INPUT使光标移动到最后或指定位置

    下面本文章给大家简单介绍一下JQUERY实现点击INPUT使光标移动到最后或指定位置例子,希望对各位有帮助,你要知道面对一个 处女座的 需求者, focus()是远远不够的,比如说“我点进去的时候光标 ...

  10. cJSON库源码分析

    本文采用以下协议进行授权: 自由转载-非衍生-保持署名|Creative Commons BY-NC-ND 3.0 ,转载请注明作者及出处. cJSON是一个超轻巧,携带方便,单文件,简单的可以作为A ...