Vue3：标签的ref属性用法

生产队队长2024-03-18 9:44

一、情景说明

我们在写前端页面的时候，肯定会遇到获取DOM内容的情况。

以往，我们是用原生的js方法去获取，如document.getXxxx

但是，这中方法会有个问题，如果父组件和子组件的id相同，则会出错。

在Vue3中，我们使用ref来获取DOM内容

从而避免这个问题

同时，可以用ref获取组件实例

标记

html 复制代码

<h2 ref="title2">北京</h2>

获取

javascript 复制代码

	import {ref,defineExpose} from 'vue'

    // 创建一个title2，用于存储ref标记的内容
    let title2 = ref()

暴露变量

javascript 复制代码

defineExpose({title2})	//多个用逗号隔开

标记

javascript 复制代码

<Person ref="ren"/>

获取

javascript 复制代码

let ren = ref()

ren变量结构，子组件暴露的变量title2位置