vue3 $ref使用

在Vue 3中，`$ref` 是一个特殊的指令，用于直接引用一个组件实例或子组件实例。当你在一个模板中使用 `ref` 指令创建一个引用，Vue 会将其绑定到该元素的实际 DOM 元素，并返回一个可读写的引用对象，你可以通过这个对象访问到组件内部的属性和方法。

例如，假设你有一个包含文本输入的 `InputComponent` 组件：

<template>
  <div ref="inputField">
    <input v-model="value" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
    };
  },
};
</script>

在这个例子中，你可以这样做：

// 在父组件中
const inputRef = this.$refs.inputField;
inputRef.value = 'New Value'; // 修改输入框的值
console.log(inputRef.$el.innerText); // 获取输入框的文本

`$ref` 的一些重要用法包括：

1. **访问DOM元素**：获取绑定元素的实际DOM节点。
2. **动态更新状态**：通过`ref`对象可以直接操作组件的状态。
3. **父子组件通信**：当子组件需要通知父组件更新时，可以通过`$emit`配合`$on`事件监听器，而不需要手动触发父组件的`v-model`。