【Vue3】深入理解Vue中的ref属性

💗💗💗欢迎来到我的博客，你将找到有关如何使用技术解决问题的文章，也会找到某个技术的学习路线。无论你是何种职业，我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章，也欢迎在文章下方留下你的评论和反馈。我期待着与你分享知识、互相学习和建立一个积极的社区。谢谢你的光临，让我们一起踏上这个知识之旅！

文章目录

🍋什么是ref？
🍋标签的ref属性
🍋扩展
🍋注意事项
🍋总结

🍋什么是ref？

ref是Vue提供的一个特殊属性，用来在模板或组件中给子元素或组件注册引用信息。这个引用信息可以是一个指向DOM元素或组件实例的引用，通过这个引用，我们可以直接操作对应的DOM元素或组件实例

🍋标签的ref属性

准备好初始代码

<template>
  <div class="person">
    <h2>馒头</h2>
    <button @click="showLog">输出h2这个元素</button>
</div>
 </template>
 
 <script lang="ts" setup name="Person11">
    
   function showLog(){
    console.log()
   }
    
 </script>
 
 <style scoped>
   .person {
     background-color: skyblue;
     box-shadow: 0 0 10px;
     border-radius: 10px;
     padding: 20px;
   }
   button {
     margin: 0 5px;
   }
 </style>

我们想要输出h2这个元素，应该怎么做，我们可以选择使用JS
在这里插入图片描述

但是在实际工作中，这样的做法并不可取，原因是怕冲突（不同组件间id相同）
如果我们想解决一下，使用ref

<template>
  <div class="person">
    <h2 ref="a">馒头</h2>  //替换成ref
    <button @click="showLog">输出h2这个元素</button>
</div>
 </template>
 
 <script lang="ts" setup name="Person11">
    import {ref} from 'vue'
    let a = ref() //用于存储ref标记的内容
   function showLog(){
    console.log(a.value)
   }
    
 </script>
 
 <style scoped>
   .person {
     background-color: skyblue;
     box-shadow: 0 0 10px;
     border-radius: 10px;
     padding: 20px;
   }
   button {
     margin: 0 5px;
   }
 </style>

之前我们都是在html中使用ref，那么是否在组件中也同样适用呢

<template>
  <button @click="showLog">输出</button>
<person ref="ren"></person>
</template>
<script lang='ts' setup name="App">
  import person from './components/person.vue'
  import {ref} from 'vue'
  let ren = ref()
  function showLog(){
    console.log(ren.value)
  }
</script>