作者：dfdzgf_542 | 来源：互联网 | 2023-06-06 18:00
#ref引用ref用来辅助开发者在不依赖于jQuery的情况下，获取DOM元素或组件的引用。每个vue的组件实例上，都包含一个$refs对象，里面存储着对应的DOM元素或组件的引用
# ref引用
ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用。
每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下，组件的 $refs 指向一个空对象。
## 使用 ref 引用DOM元素
如果想要使用 ref 引用页面上的 DOM 元素，则可以按照如下的方式进行操作:
查看代码
元素内容
methods:{
changeRef(){
//通过 this.$refs.mydiv 即可获取到上面的div元素
this.$refs.mydiv.style.color = 'red'
}
}
## 使用 ref 引用DOM元素
如果想要使用 ref 引用页面上的组件实例,如下操作：
查看代码
# 组件的 this.$nextTick(cb) 方法
## 作用
组件的 $nextTick(cb) 方法，会把 cb 回调推迟到下一个 DOM 更新周期之后执行。通俗的理解是:等组件的DOM 更新完成之后，再执行 cb 回调函数。从而能保证 cb 回调函数可以操作到最新的 DOM 元素。
## 案例说明
例如：在发表评论的时候，需要点击 发表按钮 才 显示输入框 。显示输入框 的同时需要获得焦点 和 隐藏按钮。如果 输入框失去焦点 的话，马上，隐藏输入框，显示按钮。注意：初始状态的按钮显示，输入框隐藏的。
分析：先用 ref 引用获得按钮和输入框，为按钮添加点击事件，事件函数中利用控制 v-if 和 v-else 的布尔值进而控制按钮和输入框的显示隐藏。
问题来了，当点击按钮的那一刻，输入框还不在页面，如何获得输入框的元素来操作输入框来获得焦点？那可以把获得焦点的方法定义在组件生命周期函数的updated()里面去吗？这里就要知道updated()函数并不是只在输入框显示完的时候被调用了，输入框隐藏的时候也是被调用的，隐藏了你还让输入框获得焦点，这行吗？显然不行！！
因此，这里需要用到 $nextTick(cb) 方法了，案例如下：
查看代码
本文来自博客园，作者：RHCHIK，转载请注明原文链接：https://www.cnblogs.com/suihung/p/16136436.html
京公网安备 11010802041100号