vue3如何在setup中获取DOM元素
作者：涵。
这篇文章主要介绍了vue3如何在setup中获取DOM元素问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue3在setup获取DOM元素
vue3的setup()中this为undefined，是获取不到DOM元素的，用document.getElement也获取不到，于是查了网上
方法如下
vue3引入一个新的APIgetCurrentInstance，调用它可以得到当前组件的实例对象，然后给要获取的元素添加ref，通过
<input ref='input'>
let instance=null
onMounted(()=>{
instance=getCurrentInstance()
})
//instance.refs.input.value可以获取输入框的值
vue3的setup用getElementById获取dom元素
起因
在循环使用canvas时，给每个canvas设置了一个id，我想通过id来操作canvas，但是在setup中不能用原生的js获取dom元素， 于是就有了这篇文章。
解决办法
首先是原始代码
function drawCategorySample(all_category_one) {
let pixels = all_category_one[1][0]
console.log(pixels)
let elem_id = 1 + '_' + pixels["category_id"]
console.log("id=" + elem_id)
const canvas = document.getElementById('1_0')
console.log(canvas)
// let ctx = canvas.getContext('2d');
}显然，在onmounted中调用这个函数时，canvas打印出来是null，所以就有了下面的改进，即多加了一行await nextTick()，意思是等页面dom元素全都挂载后再执行后面的代码。
async function drawCategorySample(all_category_one) {
await nextTick()
let pixels = all_category_one[1][0]
console.log(pixels)
let elem_id = 1 + '_' + pixels["category_id"]
console.log("id=" + elem_id)
const canvas = document.getElementById('1_0')
console.log(canvas)
// let ctx = canvas.getContext('2d');
}问题解决！
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。