雖然 Vue 的聲明性渲染模型為你抽象了大部分對 DOM 的直接操作，但在某些情況下，我們仍然需要直接訪問底層 DOM 元素。要實現(xiàn)這一點，我們可以使用特殊的ref。

<script setup>
import { ref, onMounted } from 'vue'
import Child from './Child.vue'
// 聲明一個 ref 來存放該元素的引用
// 必須和模板里的 ref 同名
const input = ref(null)
// 如果作用在組件上，那么ref獲取的就是這個組件實例
const child= ref(null)

onMounted(() => {
  input.value.focus()
})
</script>

<template>
  <input ref="input" />
  <Child ref="child" />
</template>