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

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>

执行结果：