Vue3 Ref 获取真实 DOM 实战：选项式与组合式 API 详解

<template>
  <!-- 普通元素 -->
  <div ref='eleBox' class='box'></div>
  <!-- 子组件 -->
  <ChildComponent ref='childCom' />
</template>
<script>
  export default {
    components: {
      ChildComponent,
    },
    mounted() {
      let eleBox = this.$refs.eleBox
      // eleBox 就是获取的真实DOM对象，可以进行DOM相关的操作
      eleBox.style.backgroundColor = '#f0f'
      // 获取子组件实例
      console.log(this.$refs.childCom)
    }
  }
</script>

<!-- 普通元素 -->
<div ref='eleBox' class='box'></div>
<!-- 子组件 -->
<ChildComponent :ref="(el) => childCom = el" />
<script setup>
  import { ref } from 'vue'
  let eleBox = ref()
  // eleBox.value 就是获取的真实DOM对象
  eleBox.value.style.width = '200px'
  let childCom = ref()
  // childCom.value 就是获取的子组件实例对象
</script>