导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

业务技能

针对性攻坚

AI

• 全称：reference 引用
• 引用 DOM 节点，引用组件实例
• 元素上绑定
  • this.$refs.xxx 是元素
• 组件上绑定
  • this.$refs.xxx 是组件
  • this.$refs.xxx.$el 是元素

HTML 元素上指定 ref 的应用

mounted 时才真的有值，之前都是空对象

ref 是只读的，不可替换

v-if 切换不同 ref 标签，ref 会改变

页面没更新完成之前，ref 没变：

等一会之后，ref 变了：

• setTimeout、 this.$nextTick 延迟都行

应用

focus input 框

加载页面后 focus input：

获取元素属性

loadMoreData 上拉加载

组件上指定 ref 的应用

this.$refs.comp 获取的是组件实例

• ref 绑定组件上，this.$refs.comp 拿到的是组件实例

可以通过此实例调用组件实例的方法、属性

• 可以通过 ref 调用子组件方法、属性...

仍然在 mounted 渲染完页面后才能拿到 ref

注意点

应用

通过 ref 获取子组件中的属性

通过 ref 调用子组件中的方法