vue3 中 $refs 咋用

在Vue 3中，$refs 是一个特殊的数据属性，允许你在运行时获取到对应的DOM元素或自定义组件实例。Vue 3默认不再提供`v-ref`指令，而是建议使用JSX的ref属性代替。以下是使用$refs的一些基本步骤：

1. **创建ref**: 在模板或组件的JS部分声明一个ref变量，通常用于引用一个特定的DOM元素或组件。例如：

   <template>
     <div ref="myElement">点击这里</div>
   </template>

或者

   export default {
     setup() {
       const myElementRef = ref(null);
       return { myElementRef };
     }
   }

2. **获取ref值**: 在methods或setup中，你可以通过`.value`属性访问ref所指向的对象，如果是DOM元素，则是一个HTML元素，如果是组件实例则是一个Vue实例：

   mounted() {
     console.log(this.myElementRef.value); // 获取到的可能是HTML元素或组件实例
   }

3. **操作DOM或实例**: 可以使用普通的DOM操作方法或者组件的方法来操作ref所指的元素或实例，比如修改样式、触发事件等：

   methods: {
     handleClick() {
       this.myElementRef.value.style.color = 'red'; // 修改颜色
     }
   }

4. **注意事项**:
- `$refs`仅在组件渲染完成后可用，所以尽量在`mounted`生命周期钩子中使用。
- `$refs`在组件卸载后会被清除，如果需要长期保存，可以考虑使用自定义事件或其他持久化的存储方式。