(vue3)dom元素中ref的应用

63 阅读1分钟

vue3源码中 ref属性可以有三种不一样的使用方式

ref:string | Ref | ((ref: Element | ComponentPublicInstance | null, refs: Record<string, any>) => void);

举一个例子

<script setup lang="ts">
import { ref, type ComponentPublicInstance } from 'vue'

/**
 * @description 变量的形式获取到指定的dom
 */
const demoRef = ref()

/**
 * @description 函数中参数domRef获取到指定的dom
 * @param domRef
 */
function demoRefFun(domRef: Element | ComponentPublicInstance | null) {
  console.dir(domRef)
}
</script>
<template>
    <div ref="demoRef"></div>
    <div :ref="demoRefFun"></div>
</template>