标签的 ref 属性
作用：用于注册模版引用
用在普通DOM标签上，获取的是DOM节点
用在组件标签上，获取的是组件实例对象
普通DOM标签
<template><div class="person"><h1>中国</h1><h2 ref="2">湖北</h2><h3>武汉</h3><button @click="showLog">点我获取h2标签内容</button></div>
</template><script lang="ts" setup name="text2">import { ref } from 'vue'// 创建一个title2,用于存储 ref 标记的内容let title2 = ref()function showLog() {console.log('h2标签', title2.value);}</script>获取的是DOM节点，这里打印的是 <h2>湖北</h2>
组件标签
<template><text1 ref="cs" /><button @click="showLog">点击获取ref</button>
</template><script lang="ts" setup name="text2">import text1 from './text1.vue'import { ref } from 'vue'// 创建一个abc,用于存储 ref 标记的内容let abc= ref()function showLog() {console.log('ref', abc.value);}</script>//-------以下为 text1的内容
<script lang="ts" setup name="text2">import { ref, defineExpose } from 'vue'// 数据let a = ref(0)let b = ref(1)let c = ref(2)defineExpose({a, b}
</script>
获取的是组件实例对象，打印的值取决于 组件内 defineExpose 导出的值
)