标签的 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 导出的值