vue3 获取dom,
本文主要介绍了在vue3中使用自定义钩子获取dom元素的问题描述，有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
使用自定义挂钩获取dom元素。分享一下楼主自己的看法。vue获取/操作组件的dom元素。下面是我的代码内容的最后总结(不是全部内容)
使用自定义hooks获取dom元素问题
获取自定义钩子的onMounted事件中的ref元素。当组件调用钩子时，它必须传递一个响应对象。
分享下楼主自己的观点
代码如下所示
脚本
//demo.vue
从“vue”导入{ defineComponent，ref }
从导入使用条。/useBars
导出默认定义组件({
道具：{
条形：阵列，
},
setup() {
const root ref=ref(null)const {当前页面索引}=use bars(root ref)//这里传递的是一个响应对象。
const { current pageindex:current pageindex 1 }=use bars(root ref)//这里传递的是空值，而不是对象
Console.log(“组件设置的最后一段”)
返回{
rootRef，
currentPageIndex，
}
},
})
/脚本
//useBar.js
从“vue”导入{ onMounted }
导出默认函数useSliders(rootRef) {
/**
* 1.传递的对象是响应对象。
*
*它是一个响应对象。当调用这个函数时，rootRef.value=nul
*实例化组件后，组件中的rootRef.value=div/div。
*执行这个onMounted事件，里面会得到一个div。这个onmounted事件将在组件实例化时执行。
*/
/**
*传递它是一个空值。
* onMounted在执行时自然为null。
*
*/
//!感觉是访问同一个地址。如果传递一个responsive对象，然后在组件中给rootRef.value赋值，也可以在这里得到。
onMounted(()={
//调试器
console.log(挂接滑块-，rootRef)
})
返回{}
}```
vue获取/操作组件的dom元素
最近做了一个需要用地图的项目，选择了腾讯地图。创建地图时，我需要将地图容器的id或容器的dom元素传递给地图创建函数。但是在调试过程中发现无法获取dom元素，无法直接通过getElementById获取元素内容。
下面是我的代码内容(非全部内容)
模板
a型模态
div id=map/div
/a-modal
/模板
脚本
从“TMap”导入TMap
导出默认值{
方法：{
open(){
this.initMap()
},
initMap(){
常数中心=新TMap。锁定(39.984120，116.307484)
const container=document . getelementbyid( map )
const map=新t map。地图(容器，{
中心：中心，
缩放：11倍
})
}
}
}
/脚本
调试页面的时候一直报错，看不清id的值。我直接打印了容器的值，但是是空的。不过看了其他网上用腾讯地图的例子，基本都是同样的思路。
然后就开始找问题，一直折腾。最后，我想是不是因为我把map容器放在了a-modal组件中。然后通过对比网上的代码，我发现别人的直接放在模板里或者用其他html元素包装，而我把map容器放在a-modal组件里。
这时我就想，是不是可以通过a-modal组件获取dom元素，然后给a-modal组件添加ref属性？代码如下所示
a-modal ref=modal
div id=map/div
/a-modal
然后打印这个。$refs.modal，观察打印的对象，看能不能找到dom元素内容，认为容器元素是用a-modal包装的，相当于用了slots，于是我找到了$slots.default属性，在上面找到了渲染的VNode，最后找到了div#map元素。
既然已经找到了，就把这个元素传递给地图创建函数。照你说的做，马上改代码。
模板
a-modal ref=modal
div id=map/div
/a-modal
/模板
脚本
从“TMap”导入TMap
导出默认值{
方法：{
open(){
this.initMap()
},
initMap(){
常数中心=新TMap。锁定(39.984120，116.307484)
const容器=this。$refs.modal.$slots.default[0]
const map=新t map。地图(容器，{
中心：中心，
缩放：11倍
})
}
}
}
/脚本
如果Tip：Vue中的槽没有名字，默认就是default，所以default[0]是默认槽的第一个元素，也就是我的div#map。好了，开始调试。
但是，还有一个问题。地图有时候出来了也不出来。是因为div元素还没有渲染吗？在这种情况下，使用vue的$nextTick，并修改open函数：
open(){
这个。$nextTick(()={
this.initMap()
})
},
果然一下子就没问题了，随时都能正常渲染地图内容。
最后总结
在vue中获取/操作页面的dom元素。如果元素和模板之间有html标签，可以通过document的get element方法直接获取元素。但是，如果它们之间有自定义组件，则必须通过组件的$slots获取dom元素。如果有一个已命名的插槽，您应该根据插槽名称找到相应插槽下的元素。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。