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

目录 1 .原生js获取 DOM 节点： 2. vue2中获取当前组件的实例对象： 3.vue3中获取当前组件的实例对象： 总结

1 .原生js获取 DOM 节点：

document.querySelector(选择器)
document.getElementById(id选择器)
document.getElementsBy classname (class选择器)
 .. ..

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

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

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

<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中 自带 了能返回当前组件实例对象的函数  get current Instance ，通过该函数获取对象节能看到该对象包含界面中的refs。

<template>
    <div ref="divDom"></div>
</template>
 
<script  SETUP >
    import { ref, getCurrentInstance }  From  'vue';
    
    const divDom = ref(null);
    on mount ed(()=>{
        console.log('获取dom元素',divDom)
    })
 
    // 获取页面的实例对象
    const pag ei nstance = getCurrentInstance();
    // 获取dom节点对象
    const tagDomObj = pageInstance.refs.divDom;
 
</script>

总结

到此这篇关于Vue3获取DOM节点的3种方式的 文章 就介绍到这了,更多相关Vue3获取DOM节点内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章: 利用vue.js插入dom节点的方法 vue中的dom节点和window对象

总结

以上是 为你收集整理的 Vue3获取DOM节点的3种方式实例 全部内容，希望文章能够帮你解决 Vue3获取DOM节点的3种方式实例 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于Vue3获取DOM节点的3种方式实例的详细内容...