vue3 setup中获取元素高度

在template中定义ref，与setup中命名要一样

在setup中要定义ref与template中名字一样，在onMounted中去 *** 作元素，因为setup是相当于create，那是页面还没渲染，所以要在onmounted中去 *** 作。要记得将元素return 不然没效果

你是拿哪个变量接收的返回数据

比如如果你使用变量叫res接收的的话，如果向获取里面的pid的话，针对这条数据，就是

resdata[0]pid

因为data是个数组，虽然这里面只有一个元素

大家都知道mounted声明周期是发生在dom挂载完成之后，所以理论上是可以获取到dom元素的

但是有一些特殊情况下，是没办法在mounted中直接获取到都dom元素的。

例如，dom是一个v-if判断展示与否的元素时，如果我们在mounted里使判断条件成立，那么此时打印这个dom元素会是undefined。

这个时候就需要使用异步 *** 作来获取。

在vue的开发过程中，常常需要 *** 作表格元素，比如数据的分页呈现，某行数据的修改、删除等 *** 作，不可避免的需要 *** 作某行数据，本文描述了这一过程

首先，我们全局引入ant-design-vue，本文简称为antd，为蚂蚁金服推出的一款UI组件，在mainjs中添加即可。

下面我们使用antd的表格组件，在dom元素中定义表格相关属性及数据的来源信息等。

dataSource为数据的来源，格式为数组，我们通过ajax的方式请求后台获取数据。

列信息需要和返回对象的属性对应，如果有些列不是对象的属性，比如 *** 作列，可以通过增加scopedSlots的方式。

名称为action的插槽(slot)，需要在dom元素中进行设置，添加在a-table的子元素中。slot-scope="text,record"中的record就是这行的数据值。

我们通过F12进行调试，将record的信息进行打印，不难发现，record确实记录了这行的数据信息

$event：当前触发的是什么事件

$eventtarget:触发事件的元素对象（不一定是绑定事件的对象，会因为事件冒泡变化）

$eventcurrentTarget:绑定事件的元素对象

参考：

vue中关于$event的通俗理解

Vue 点击获得父元素，子元素，兄弟元素（DOM *** 作）

<video ref="videoEle" class="video_channel" width="100%" height="auto" :poster="list[0]img"> <source :src="list[0]video"> </video>

<script>

// ref就是获取Dom, 只是把这个元素获取以后帮到$refs对象里了

Vue$refs['video']play();

</script>

直接在标签中添加click事件（@click＝fn），然后在vue实例中的（methods）配置项里添加方法fn，实现你的功能。这样不行吗？vue框架不是不能用原生js获取dom元素，只是用框架就是为了避免 *** 作dom元素

以上就是关于vue3 setup中获取元素高度全部的内容，包括:vue3 setup中获取元素高度、接口返回这样的数据，vue如何获取data中的数据、关于vue mounted钩子里能不能获取dom的问题等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！