Vue3获取元素DOM的两种方法
作者：Carlos_sam
Vue3 DOM是Vue.js框架的一部分，用于处理与浏览器DOM相关的操作，它提供了一组API和工具，使开发者能够轻松地操作和管理DOM元素，本文给大家介绍了Vue3获取元素DOM的两种方法：ref模板引用和传统方法，并有详细的代码示例,需要的朋友可以参考下
Vue3中获取dom的方法有两种 : ref模板引用和传统方法
1.ref模板引用
模板引用是官方提出的方法，请看下面的例子：
<template>
<canvas ref="solarCanvas" id="solar" width="1300" height="900"></canvas>
</template>
<script setup>
import { onMounted, ref } from 'vue'
const solarCanvas = ref(null)
onMounted(() => {
console.log(solarCanvas.value)//HTMLCanvasElement{...}
})
</script>这里要注意的是只可以在组件挂载后才能访问模板引用 ，上面的例子中onMounted执行时组件已经挂载了 , 所以打印solarCanvas有值。
<template>
<canvas ref="solarCanvas" id="solar" width="1300" height="900"></canvas>
</template>
<script setup>
import { onMounted, ref } from 'vue'
const solarCanvas = ref(null)
console.log(solarCanvas.value)//null
</script>反之，如果这样写打印出来的值就为null，因为此时组件还没有挂载完成。
2.传统方法
传统方法就是指使用JS原生的获取dom的方法，如：getElementById、querySelector等。请看下面的例子：
<template>
<canvas id="solar" width="1300" height="900"></canvas>
</template>
<script setup>
import { nextTick, onMounted, ref } from 'vue'
onMounted(() => {
const canvas = document.getElementById('solar')
console.log(canvas)//HTMLCanvasElement{...}
})
</script>拓展：Vue3获取DOM节点的几种方式
1 .原生js获取 DOM 节点：
document.querySelector(选择器) document.getElementById(id选择器) document.getElementsByClassName(class选择器) ....
2. vue2中获取当前组件的实例对象：
因为每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 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中自带了能返回当前组件实例对象的函数 getCurrentInstance，通过该函数获取对象节能看到该对象包含界面中的refs。
<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>3.结论
在Vue3当获取DOM的方法主要有两个：模板引用和传统方法。
但需要注意的是，无论使用哪种方法都只有在组件挂载之后才能获取到DOM，可以使用watch或onMounted确保自己已经获取到DOM。
到此这篇关于Vue3获取元素DOM的两种方法的文章就介绍到这了,更多相关Vue3获取DOM内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！