Vue3使用$refs

在Vue3中，可以使用$refs来引用组件或DOM元素。

对于组件，可以在组件内部使用ref属性来定义一个引用标识符，然后在父组件中使用$refs来引用这个组件。

例如，在子组件中定义一个引用标识符：

<template>
  <div ref="myComponent">
    <!-- 组件内容 -->
  </div>
</template>

然后在父组件中使用$refs来引用这个子组件：

<template>
  <div>
    <my-component ref="myComponentRef"></my-component>
  </div>
</template>

<script>
export default {
  mounted() {
    const myComponent = this.$refs.myComponentRef.$refs.myComponent;
    // 使用myComponent
  }
}
</script>

对于DOM元素，可以直接在模板中使用ref属性来定义一个引用标识符，然后在脚本中使用$refs来引用这个元素。

例如，在模板中定义一个引用标识符：

<template>
  <div>
    <input ref="myInput" type="text">
  </div>
</template>

然后在脚本中使用$refs来引用这个输入框元素：

<template>
  <div>
    <input ref="myInput" type="text">
  </div>
</template>

<script>
export default {
  mounted() {
    const myInput = this.$refs.myInput;
    // 使用myInput
  }
}
</script>