vue2 中 ref 的使用

ref 是什么

ref 被用来给DOM元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。

如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；
如果用在子组件上，引用就指向组件实例。

获得了引用信息，那么我们就可以操作元素或者组件了。

为什么使用 ref

通过定义我们知道了ref的作用注册引用，并通过$refs去获取该引用的DOM元素
而且我们知道js中也有对应的api来获取元素，比如document.getElementById('id名称')，

那么这二者的区别是什么呢？

查了网上的说法是

$refs相对document.getElementById的方法，能减少获取DOM节点的消耗。
我们知道vue实现了虚拟DOM，具体底层如何实现，目前还没精力和能力去研究，后续会深入了解vue源码

也就是说在vue中要是操作DOM 元素推荐使用$refs 这种方式，可以提高性能。

还有一点需要注意，ref 是在页面渲染完成后才被创建的，
我们可以在vue 的 mounted这个钩子函数中获取实例，因为在该函数页面已经被渲染完成。

ref 和 refs 的关系

this.$refs 返回了一个对象，包含当前页面的所有 ref引用名称
ref 用于定义引用名称

怎么使用

比如下面的伪代码：

完整代码示例：vue2 中 ref 和 refs 的使用示例

<div id="app"><a ref="a" href="http://www.w3school.com.cn">设置 DOM 元素的 ref</a><HelloWorld ref="helloWorld" msg="Hello Vue in CodeSandbox!" />
</div>methods: {init() {console.log("子组件:", this.$refs.helloWorld);this.$refs.a.href = "www.baidu.com";console.log("通过 ref 修改 DOM 元素:", this.$refs.a);this.$refs.helloWorld.printHello();},},

输出结果是：

子组件: VueComponent {_uid: 108, _isVue: true, $options: Object, _renderProxy: VueComponent, _self: VueComponent…}
通过 ref 修改 DOM 元素: <a href="www.baidu.com">设置 DOM 元素的 ref</a>通过refs获得子组件并调用组件的方法

end

vue2 中 ref 的使用相关推荐

Vue2中ref属性的用法
最近写东西遇到了莫名其妙的问题,用ref属性原以为它会获得一个数组http://www.jianshu.com/p/05c863ec2a23 // html <ul><li ref= ...
vue3中ref的理解
1.什么是ref ref和reactive一样,也是用来实现响应式数据的方法由于reactive必须传递一个对象,所以在实际开发中如果只是想让某个变量实现响应式的时候回非常麻烦所以Vue3提供了r ...
在vue2中使用vue3的核心功能（渐进式升级vue版本）
一.前言学了真香的vue3语法,但目前的vue2项目中短期内不会再升级了,空有屠龙之术无法施展?来试试以下的解决方案,让你在vue2项目中也能用上vue3的核心语法-组合式API. 二.选项式API ...
Vue3和element plus 中ref用法元素实例操作
在 vue3 中,组件的逻辑可以放在 setup 函数里面,但是 setup 中不再有 this,所以 vue2 中的 this.$refs 的用法在 vue3 中无法使用. 用法是: element ...
Spring中ref local与ref bean区别
为什么80%的码农都做不了架构师?>>> Spring中ref local与ref bean区别今天在做SSH框架Demo实例时,在ApplicationResources. ...
react 子组件ref_React中Ref 的使用方法详解
本文实例讲述了React中Ref 的使用方法.分享给大家供大家参考,具体如下: React中Ref 的使用 React v16.6.3 在典型的React数据流中,props是父组件与其子组件交互的唯 ...
React中ref的使用方法
React中ref的使用方法在react典型的数据流中, props 传递是父子组件交互的唯一方式:通过传递一个新的 props 值来使子组件重新 re-render ,从而达到父子组件通信.当然, ...
C#中ref和out的使用小结
C#中ref和out的使用小结 ref是传递参数的地址,out是返回值,两者有一定的相同之处,不过也有不同点. 使用ref前必须对变量赋值,out不用. out的函数会清空变量,即使变量已经赋值也不行 ...
vue中ref 的使用
在vue 中 ref 和 refs 的使用: <ul ref="ul" class="his-list listItem" style="pa ...