vue3中使用ref获取dom的操作代码

我爱一条柴

前言

本期文章我将给大家带来的是vue3中用ref获取dom的操作，ref在我们开发项目当中很重要的，在 Vue 中使用

1. ref

复制代码

可以提高代码的可读性和维护性，因为它直接标识出了组件中需要操作的具体元素或组件实例。这使得团队合作、代码审查和后续功能更新更加高效。总结来说，

1. ref

复制代码

在 Vue 中是一个非常有用的工具，不仅使得操作 DOM 更加方便和直观，还能够提升组件间通信的灵活性和效率。正确使用

1. ref

复制代码

可以帮助开发者更好地管理和操作 DOM 元素以及组件实例，从而实现复杂的前端交互和 UI 动效。接下来我就一一道来吧

通过ref直接拿到dom引用

1. <template>
   
2.   <div class="demo1-container">
   
3.       <div ref="sectionRef" class="ref-section">1111111</div>
   
4.   </div>
   
5. </template>
   
6. 
   
7. <script setup lang="ts">
   
8. import {onMounted, ref} from 'vue'
   
9. const sectionRef = ref(null)
   
10. onMounted(() => {
    
11.   console.log(sectionRef.value)
    
12. })
    
13. 
    
14. </script>

复制代码

在这里我们要注意的是当在div标签中用

1.  ref="sectionRef"

复制代码

，之后在声明响应式变量的时候，要用

1. sectionRef

复制代码

命名，这个是一定要的，然后我们通过 sectionRef.value 的形式即可获取该div元素。 让我们看看结果吧

单一dom元素或者个数较少的场景

通过父容器的ref遍历拿到dom引用

1. <template>
   
2. <div class="demo2-container">
   
3.      <div ref="listRef" class="list-section">
   
4.          <div @click="higherAction(index)" class="list-item" v-for="(item, index) in state.list" :key="index">
   
5.              <span>{{item}}</span>
   
6.          </div>
   
7.      </div>
   
8. </div>
   
9. </template>
   
10. 
    
11. <script setup lang="ts">
    
12. import { ref, reactive, onMounted } from 'vue'
    
13. const listRef = ref()
    
14. const state = reactive({
    
15.    list: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
    
16. })
    
17. onMounted(()=>{
    
18. console.log(listRef.value)
    
19. })
    
20. </script>
    
21. 
    
22. <style scoped>
    
23. .demo2-container {
    
24.    width: 200px;
    
25.    height: 400px;
    
26.    border: 1px solid #000;
    
27.    overflow: auto;
    
28. }
    
29. </style>

复制代码

通过对父元素添加了ref属性，并声明了一个与ref属性名称相同的变量listRef，此时通过listRef.value会获得包含子元素的dom对象,然后我们就可以此时通过

1. listRef.value.children[index]

复制代码

的形式获取子元素dom

通过:ref将dom引用放到数组中

1. <template>
   
2.     <div class="demo2-container">
   
3.         <div class="list-section">
   
4.             <div :ref="setRefAction" @click="higherAction(index)" class="list-item" v-for="(item, index) in state.list" :key="index">
   
5.                 <span>{{item}}</span>
   
6.             </div>
   
7.         </div>
   
8.     </div>
   
9. </template>
   
10. <script setup lang="ts">
    
11. import { onMounted, reactive ,ref} from 'vue'
    
12. const state = reactive({
    
13.     list: [1, 2, 3, 4, 5, 6, 7],
    
14.     refList: []
    
15. })
    
16. const index = ref(null)
    
17. const setRefAction = (el: any) => {
    
18.     state.refList.push(el);
    
19. }
    
20. const higherAction = (index) => {
    
21.    console.log(state.refList[index])
    
22.    
    
23. }
    
24. onMounted( () => {
    
25.     console.log(state.refList);
    
26.     setRefAction(index)
    
27. })
    
28. </script>
    
29. <style scoped>
    
30. .demo2-container {
    
31.     width: 200px;
    
32.     height: 400px;
    
33.     border: 1px solid #000;
    
34.     overflow: auto;
    
35. }
    
36. .list-item {
    
37.   background-color: pink;
    
38.   border: 1px solid #000;
    
39. }
    
40. </style>

复制代码

这种情况下，我们可以通过动态设置ref的形式进行设置ref，这样我们就可以获取到一个ref的数组，结果如下

当我们点击哪个就会获取哪个的dom，这样我们简单多了
到此这篇关于vue3中使用ref获取dom的操作代码的文章就介绍到这了,更多相关vue3 ref获取dom内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/323339wb1.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！