ref的引用理解

最新推荐文章于 2024-07-07 14:57:44 发布

yyl3721

最新推荐文章于 2024-07-07 14:57:44 发布

阅读量339

点赞数

文章标签： vue.js html5 css javascript

本文链接：https://blog.csdn.net/yyl3721/article/details/120560275

版权

本文介绍了Vue.js中ref属性的使用，包括如何引用DOM元素和组件实例，以及如何通过inputVisible控制文本框和按钮的显示切换。同时，探讨了如何利用$refs使文本框获得焦点，并详细解析了$nextTick方法的作用，即确保在DOM更新后执行回调函数，以正确操作最新的DOM状态。

摘要由CSDN通过智能技术生成

一、ref引用
ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用。
每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下，组件的 $refs 指向一个空对象。
二、使用 ref 引用 DOM 元素
三、使用 ref 引用组件实例
四、控制文本框和按钮的按需切换
通过布尔值 inputVisible 来控制组件中的文本框与按钮的按需切换。
五、让文本框自动获得焦点
当文本框展示出来之后，如果希望它立即获得焦点，则可以为其添加 ref 引用，并调用原生 DOM 对象的.focus() 方法即可。
六、 this.$nextTick(cb) 方法
组件的 $nextTick(cb) 方法，会把 cb 回调推迟到下一个 DOM 更新周期之后执行。通俗的理解是：等组件的DOM 更新完成之后，再执行 cb 回调函数。从而能保证 cb 回调函数可以操作到最新的 DOM 元素。