ref 全称为 reference 引用的意思
用于引用 DOM 节点、引用组件实例

:::danger refs 是逃生仓,应急使用。有多种解决方案时,refs 并不是首选。
使用 Props / 事件的传递会有更好的维护 :::

在 Options API 可以使用 this.$refs 访问到所有的 ref

作用时机

需要DOM / 组件得到挂载后才能得到

作用在 HTML 元素上

可以得到 HTML 的 DOM

作用在组件

可以得到组件的实例

:::warning

注意

  • $refs 并不是响应式

    1. 不要在模板中使用
    2. 不要在 Computed 计算属性中使用
    3. 不要尝试更改 ref,ref 是提供获取 DOM 或 组件实例
  • 不要使用 $refs 得到组件实例而修改属性数据。这样有违单向数据流。应该由数据提供方来进行修改。

    • 即取值,但不要改值
    • 改值的话,应该在组件中提供改值的方法,让其调用 :::

      实际应用场景

      兄弟组件之间相互调用方法、获取属性