Vue3：标签的ref属性用法

一、情景说明

我们在写前端页面的时候，肯定会遇到获取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节点。
• 用在组件标签上，获取的是组件实例对象。