使用 ref 属性操作 DOM

前言

有时候我们需要拿到 dom 元素，或者是组件元素的实例。就需要用到 ref 属性。

详见 模版引用

如果 ref 属性是附加在原生 DOM 元素上，则该 ref 属性对应的 ref() 变量就是该 DOM 的引用。
如果 ref 属性是附加在子组件上，则该 ref 属性对应的 ref() 变量是该组件的实例。

声明变量

使用 ref()函数声明一个变量，并将该变量附加到 DOM 元素的 ref 属性上，该变量就引用了该 DOM。

<template>
  <div>
    <input :ref="input" />
  </div>
</template>
<script setup>
import { ref } from "vue";
const input = ref(null);
</script>