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. vscode设置语言

     按 ctrl+shift+p   中文设置成英文输入 “配置语言”  打开locale.json 设置 "locale":"en" 英文设置成中文输入 &qu ...

  2. 解决flashfxp连接虚拟机报错 530 permission denied

    菜鸟使用flashfxp遇到连接报错. [21:36:19] [R] 530 Permission denied.[21:36:19] [R] 连接失败 (连接已被客户端关闭) 搜索后发现,是因为li ...

  3. 【学习笔记】Java中生成对象的5中方法

    概述:本文介绍以下java五种创建对象的方式: 1.用new语句创建对象,这是最常用的创建对象的方式. 2.使用Class类的newInstance方法 3.运用反射手段,调用java.lang.re ...

  4. jqueryUI学习

    01.选项卡 拖动按钮<div id="tabs"> <ul> <li><a href="#tabs-1">第一 ...

  5. python unix时间戳

    这是第一次用着python感到怒了,从datetime转化到timestamp数值居然没有直接的函数 直接获取当前时间戳倒是方便: import time timestamp = time.time( ...

  6. CRM——起步

    一.CRM简介 crm 客户关系管理软件 ( Customer Relationship Management ). 二.CRM起步 1.设计表结构和数据库迁移 from django.db impo ...

  7. HTML 提高页面加载速度的方法

    (1)减少 HTTP 的请求.(合并资源文件 和 使用图片精灵 : (2)把CSS  放头部,把 JavaScript 放到 body 标签尾部: (3)定义图片的宽和高: (4)定义字符集: (5) ...

  8. vue授权页面登陆之后返回之前的页面

    import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)import home from "@/pages/ho ...

  9. 关于js 中函数的参数

    var a = 100; function test(a){ a++; //a(形参)是局部变量 console.log(a); } test(a); console.log(a); //结果是 10 ...

  10. wxpython CustomTreeCtrl

    转自 http://xoomer.virgilio.it/infinity77/Phoenix/lib.agw.customtreectrl.CustomTreeCtrl.html这个网址中有许多控件 ...