如果想获取一个dom元素但是两个组件都有相同的id就会优先加载第一个的ref就是为了解决这个问题的​template div classperson div idtitle你好/div button clickhandleClick点击我/button /div /template script setup const handleClick () { console.log(document.getElementById(title)) } /script style langscss scoped .person { background-color: skyblue; box-shadow: 0 0 10px; border-radius: 10px; padding: 20px; } button { margin-right: 10px; } /style ​template div idtitleapp/div Person/ /template script setup nameApp import Person from ./componets/person.vue // export default { // name:App,//组件名 // components:{Person}//注册组件 // } /script !-- style .app { background-color: #ddd; box-shadow: 0 0 10px; border-radius: 10px; padding: 20px; } /style --ref加在html标签上​template div classperson div reftitle你好/div button clickhandleClick点击我/button /div /template script setup import{ref} from vue const titleref() const handleClick () { console.log(title.value); } /script style langscss scoped .person { background-color: skyblue; box-shadow: 0 0 10px; border-radius: 10px; padding: 20px; } button { margin-right: 10px; } /style ​template div reftitleapp/div button clickhandleClick点击我/button Person/ /template script langts setup nameApp import Person from ./componets/Person.vue import {ref} from vue const titleref() const handleClick () { console.log(title.value); } // export default { // name:App,//组件名 // components:{Person}//注册组件 // } /script !-- style .app { background-color: #ddd; box-shadow: 0 0 10px; border-radius: 10px; padding: 20px; } /style --ref加在组件标签上出现组件实例template div reftitleapp/div button clickhandleClick点击我/button Person refren/ /template script langts setup nameApp import Person from ./componets/Person.vue import {ref} from vue const titleref() const handleClick () { console.log(title.value); } const renref() console.log(ren); // export default { // name:App,//组件名 // components:{Person}//注册组件 // } /script !-- style .app { background-color: #ddd; box-shadow: 0 0 10px; border-radius: 10px; padding: 20px; } /style --