一、情景说明
我们在写前端页面的时候,肯定会遇到获取DOM
内容的情况。
以往,我们是用原生的js
方法去获取,如document.getXxxx
但是,这中方法会有个问题,如果父组件和子组件的id
相同,则会出错。
在Vue3
中,我们使用ref
来获取DOM
内容
从而避免这个问题
同时,可以用ref
获取组件实例
二、案例
1、用在原生DOM上
标记
<h2 ref="title2">北京</h2>
获取
import {ref,defineExpose} from 'vue'
// 创建一个title2,用于存储ref标记的内容
let title2 = ref()
暴露变量
defineExpose({title2}) //多个用逗号隔开
2、用在组件标签上
标记
<Person ref="ren"/>
获取
let ren = ref()
ren
变量结构,子组件暴露的变量title2
位置
三、总结
- 用在普通
DOM
标签上,获取的是DOM
节点。 - 用在组件标签上,获取的是组件实例对象。