Vue之ref属性详解

Vue 的 ref 属性用于在 Vue 实例中注册一个引用信息。ref 属性可以应用于元素或组件，并在 Vue 实例的 $refs 对象中保存对该元素或组件的引用。这使得我们可以在 Vue 实例的方法或计算属性中直接访问和操作这些元素或组件。

使用 ref 属性

在模板中，我们可以使用 ref 属性为元素或组件设置一个引用名：

<template>  
  <div>  
    <input ref="inputElement" />  
    <my-component ref="myComponent"></my-component>  
  </div>  
</template>

在上面的示例中，我们为一个 input 元素和一个名为 my-component 的组件分别设置了 ref 属性。这意味着我们可以在 Vue 实例中通过 $refs 对象访问它们：

export default {  
  mounted() {  
    // 访问 input 元素  
    const inputElement = this.$refs.inputElement;  
    console.log(inputElement.value); // 输出 input 元素的值  
  
    // 访问 my-component 组件实例  
    const myComponent = this.$refs.myComponent;  
    console.log(myComponent); // 输出 my-component 组件实例  
  },  
};

注意事项：

1. 引用名称：ref 属性的值是一个字符串，表示引用名称。在 Vue 实例中，可以通过 $refs 对象和引用名称访问对应的元素或组件。
2. 访问时机：由于 Vue 的异步更新队列，在 Vue 生命周期钩子函数（如 mounted、updated 等）中访问 $refs 是安全的。但在某些情况下，例如在 created 钩子函数中，可能无法立即访问到 $refs 中的元素或组件。
3. 动态引用：当使用 v-for 指令创建多个元素时，可以使用动态引用名称。例如，可以使用 :ref="'item-' + index" 来为每个循环元素设置一个唯一的引用名称。
4. 组件内部访问：在组件内部，可以通过 this.$refs 访问组件内部的元素或子组件。但需要注意的是，子组件中的 $refs 是相对于子组件实例的，而不是父组件实例。
5. 销毁引用：当 Vue 实例销毁时，与之关联的 $refs 对象也会被销毁。因此，不需要手动销毁引用。
6. 避免过度使用：虽然 ref 属性提供了直接访问 DOM 元素和组件实例的能力，但过度使用可能导致代码耦合度增加。在可能的情况下，尽量使用 Vue 的数据驱动方式来实现功能。