首页 > web前端 > Vue.js > 正文

Vue3获取DOM节点的方式有哪些

WBOY
发布: 2023-05-11 16:55:06
转载
3779 人浏览过

1 .原生js获取 DOM 节点:

document.querySelector(选择器)
document.getElementById(id选择器)
document.getElementsByClassName(class选择器)
....
登录后复制

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

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

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

<template>
  <div class="box">
    <h2 ref="divDom">这是一个测试样例</h2>
    <button ref="but">按钮</button>
  </div>
</template>
 
<script>
 
export default {
  data() {
    return {
    }
  },
  methods: {
    showThis(){
      // h2的实例对象 
      console.log(this);
      this.$refs.divDom.style.color=&#39;yellow&#39;
      //引用到组件的实例之后,也可以调用组件上的 methods方法
      this.$refs.but.click();
    },
  },
}
</script>
登录后复制

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

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

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

<template>
    <div ref="divDom"></div>
</template>
 
<script setup>
    import { ref, getCurrentInstance } from &#39;vue&#39;;
    
    const divDom = ref(null);
    onMounted(()=>{
        console.log(&#39;获取dom元素&#39;,divDom)
    })
 
    // 获取页面的实例对象
    const pageInstance = getCurrentInstance();
    // 获取dom节点对象
    const tagDomObj = pageInstance.refs.divDom;
 
</script>
登录后复制

以上是Vue3获取DOM节点的方式有哪些的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:yisu.com
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板