当前位置：首页 > article >正文

Vue3.0组合式API：使用ref获取DOM元素

article 2025/2/21 3:10:23

Vue3.0组合式API系列文章：

《Vue3.0组合式API：setup()函数》

《Vue3.0组合式API：使用reactive()、ref()创建响应式代理对象》

《Vue3.0组合式API：computed计算属性、watch监听器、watchEffect高级监听器》

《Vue3.0组合式API：使用defineProps()实现父组件向子组件传递数据》

《Vue3.0组合式API：使用defineEmits()实现子组件向父组件传递数据》

《Vue3.0组合式API：生命周期钩子函数》

《Vue3.0组合式API：依赖注入provide和inject实现跨层组件的通信》

《Vue3.0组合式API：使用ref获取DOM元素》

在 Vue3.0 中，使用 ref() 函数除了可以对某个原始值创建响应式代理对象，还可以获取模板中的指定 DOM 元素。要获取指定 DOM 元素，首先需要为该元素添加一个 ref 属性，然后在 setup() 函数中声明一个名称与 ref 属性值相同的变量，并传入一个空值 null，再通过“变量名.value”的形式就可以获取到该元素。

【实例】使用ref获取DOM元素并赋值。

<template>
    <fieldset>
        <legend>组件</legend>
        <!-- 第一步：给 DOM 元素，添加 ref 属性 -->
        <h3 ref="title">标题名称</h3>
        <p>博客信息：<input ref="blogName" type="text" /></p>
        <p>博客地址：<input ref="blogUrl" type="text" /></p>
    </fieldset>
</template>

<!-- 使用 <script setup> 语法糖 -->
<script setup>
import { ref, onMounted } from 'vue';

//第二步：声明名称与 ref 属性值相同的变量，并传入一个空值 null
const title = ref(null);
const blogName = ref(null);
const blogUrl = ref(null);

//说明：onMounted()生命周期钩子，在 DOM 文档渲染完毕之后进行调用。
onMounted(() => {
    //第三步：通过“变量名.value”的形式就可以获取到该 DOM 元素，并赋值内容
    title.value.innerHTML = '使用 ref 获取 DOM 元素';
    blogName.value.value = '您好，欢迎访问 pan_junbiao的博客';
    blogUrl.value.value = 'https://blog.csdn.net/pan_junbiao';
})
</script>

<style scoped>
input {
    width: 300px;
    padding: 3px;
    font-size: 16px;
}
</style>

执行结果：