Loading... 如果我们需要读取html中的文字可以添加ref标签 ```vue <template> <div class="test"> <h1>Little</h1> <h2 ref="title2">Yanlin</h2> <button @click="Showlog">点击输出h2</button> </div> </template> <script lang="ts" setup name="test"> import {ref} from 'vue' let title2=ref () function Showlog(){ console.log(title2.value) } </script> <style> </style> ```  可以在组件名前添加ref，这是可以读取组件中的变量值，但需要在组件中设置暴露哪些变量 `app.vue` ```vue <template> <div class="test"> <h1>Little</h1> <h2 ref="title2">Yanlin</h2> <button @click="Showlog">点击输出APP里的h2</button> <button @click="shouTest">点击输出test</button> </div> <test ref="a1"/> </template> <script lang="ts" setup name="test"> import {ref} from 'vue' import test from './components/test.vue'; let title2=ref (),a1=ref() function Showlog(){ console.log('app',title2.value) } function shouTest(){ console.log('test',a1.value.b) } </script> <style> </style> ``` `test.vue` ```vue <template> <h1>test</h1> </template> <script lang="ts" setup name="test"> import { ref } from 'vue'; let a=ref(0),b=ref(123) defineExpose({a,b}) </script> <style> </style> ``` `defineExpose()`就是要展示出需要暴露的变量值。  最后修改：2025 年 06 月 02 日 © 允许规范转载 赞 不用打赏哦！