vue中的 ref 和 $refs

转载 2018年04月16日 11:50:37

vue中的 ref 和 $refs

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

在上面的例子中,input的引用信息为input1 ,$refs 是所有注册过的ref的一个集合,

console.log(this.$refs.input1)//<input type="text" id="input1">
console.log(document.getElementById('input1'))//<input type="text" id="input1">

 这两种方法获得的都是Dom节点,而$refs相对document.getElementById的方法,会减少获取dom节点的消耗。

ref和v-for在一起的情况

li里的ref的无法读取item里面的值,即item.name或被直接读取为字符串“item.name”,

此时的$refs

VC6中两个对话框的同时显示 作者:黄基前

 对于VC++初学者,可能会遇到这样一个问题:一个基于Dialog的MFC AppWizard应用程序,再Insert一个对话框,如何同时显示这两个对话框呢? ---- 其实这个问题很简单,想要在屏幕...
  • ghj1976
  • ghj1976
  • 2001-01-09 10:47:00
  • 1392

Vue中ref与$refs的使用

ref 被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是DOM 元素;如果用在子组件上,引用就指向组件实例。 1....
  • Randy_Shenyp
  • Randy_Shenyp
  • 2018-01-22 18:25:33
  • 230

Vue之ref与refs的使用

官方解释是:ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例...
  • HZKang
  • HZKang
  • 2017-10-20 11:54:02
  • 970

vue里面ref和生命周期的理解

1. ref vue里面增加一个DOM节点的写法。这是比较通俗的说法,vue里面讲的是ref是给元素或者子组件注册引用信息的,值得注意的是引用信息注册在父组件的$refs对象上。如果在普通的DOM元...
  • qq_24122593
  • qq_24122593
  • 2017-10-19 09:43:45
  • 767

vue中ref的使用

ref本身作为渲染结果被创建,在初始渲染的时候不能访问他们,是不存在的$refs不是响应式的,只在组件渲染完成后才填充用于元素或子组件注册引用信息,注册完成,将会注册在父组件$refs对象上如果你获取...
  • dwf_H
  • dwf_H
  • 2018-04-06 23:10:41
  • 29

vue中this.$el 和 this.$ref

+ + {{el.value}} + vue中也是允许进行dome操作的(但是不建议) 这里我就说说 this.$el和this.$ref的区别 ...
  • zhanglongdream
  • zhanglongdream
  • 2017-07-19 16:31:05
  • 2238

Vue.js之$refs

尽管有 prop 和事件,但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个引用 ID。ref 为子组件指定一个引用 ID,使父组件能通过 ref 直接...
  • x550392236
  • x550392236
  • 2017-11-16 16:03:27
  • 148

Vue $refs的基本用法

原文地址:http://www.cnblogs.com/xueweijie/p/6907676.html div id="app"> input type="text" ref=...
  • tanga842428
  • tanga842428
  • 2017-06-18 18:06:59
  • 12555

理解Vue 2.0 的ref属性及简单用法

以一个菜单为例:先搭建一个菜单列表example.vue: ...
  • DevilLittle
  • DevilLittle
  • 2017-08-26 18:13:12
  • 4781

jQuery如何操作用Vue.js template的元素,用vm.$refs.id--id是vue的ref指定的一个引用

目标:我想用jQuery操作vue模板中的元素; 示例html:  我是内容 示例js: var vm = new Vue({ updated: function () {/...
  • tangcc110
  • tangcc110
  • 2018-01-20 22:05:17
  • 65
收藏助手
不良信息举报
您举报文章:vue中的 ref 和 $refs
举报原因:
原因补充:

(最多只允许输入30个字)