Vue3绑定ref

在Vue3中，可以使用`ref`来获取一个元素或组件的实例。绑定`ref`的方式有两种：

1. 在模板中使用`ref`指令：

   <template>
     <div ref="myDiv">Hello World!</div>
   </template>

2. 在组件中使用`ref`属性：

   <template>
     <child-component ref="myComponent"></child-component>
   </template>

在以上两种方式中，`ref`的值可以是一个字符串或一个函数。如果是字符串，那么`ref`将会指向组件或元素的实例；如果是函数，那么函数的参数就是组件或元素的实例。例如：

<template>
  <div ref="myDiv" @click="handleClick"></div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const myDiv = ref(null);

    const handleClick = () => {
      console.log(myDiv.value); // 打印元素实例
    };

    return {
      myDiv,
      handleClick,
    };
  },
};
</script>

在上面的例子中，我们使用`ref`绑定了一个元素，并且在`handleClick`方法中获取了元素的实例。注意，在Vue3中，`ref`返回的是一个响应式的对象，需要使用`.value`来访问实际的值。