vue3获取DOM节点的3种方式实例

1 .原生js获取 DOM 节点:

1
2
3
4
document.querySelector(选择器)
document.getElementById(id选择器)
document.getElementsByClassName(class选择器)
....

2. vue2中获取当前组件的实例对象:

因为每个 vue 的组件实例上,都包含一个 $refs 对象,里面存储着对应的 DOM 元素或组件的引用。所以在默认情况下, 组件的 $refs 指向一个空对象 。

可以先在组件上加上 ref="名字" ,然后通过 this.$refs.名字 获取相应元素并进行操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
  <div class="box">
    <h1 ref="divDom">这是一个测试样例</h1>
    <button ref="but">按钮</button>
  </div>
</template>
  
<script>
  
export default {
  data() {
    return {
    }
  },
  methods: {
    showThis(){
      // h1的实例对象
      console.log(this);
      this.$refs.divDom.style.color='yellow'
      //引用到组件的实例之后,也可以调用组件上的 methods方法
      this.$refs.but.click();
    },
  },
}
</script>

3.vue3中获取当前组件的实例对象:

 在Vue3框架里面是解除了this这个对象,所以无法使用this.$refs的方式获取自定义组件 ref 的DOM节点。

但是vue3中自带了能返回当前组件实例对象的函数 getCurrentInstance,通过该函数获取对象节能看到该对象包含界面中的refs。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
    <div ref="divDom"></div>
</template>
  
<script setup>
    import { ref, getCurrentInstance } from 'vue';
     
    const divDom = ref(null);
    onMounted(()=>{
        console.log('获取dom元素',divDom)
    })
  
    // 获取页面的实例对象
    const pageInstance = getCurrentInstance();
    // 获取dom节点对象
    const tagDomObj = pageInstance.refs.divDom;
  
</script>

总结

到此这篇关于Vue3获取DOM节点的3种方式的文章就介绍到这了,更多相关Vue3获取DOM节点内容请搜索IT盛行!

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: