Vue 获取渲染后的 DOM
# Vue 获取渲染后的 DOM
# 一、获取普通 DOM 元素
因为 Vue 虚拟 DOM 的存在，直接使用 DOM 原生的方法获取元素效率不高，通常使用的是 Vue 提供的 ref 来获取我们想到的 DOM 元素，其使用如下：
<template>
<div id="app">
<div ref="div">
Test DOM
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log(this.$refs.div);
},
};
</script>在 Vue 当中获取 DOM 元素 Vue 提供了 this.$refs.xx 的方法，但是这种方式只能够获取到 DOM 元素，不能够获取到 Vue Component 里面的内容。
# 二、获取 Vue Component
# 1、新建如下 Vue 文件
// test.vue
<template>
<div>
Test
</div>
</template>
<script>
export default {};
</script># 3、将组件引入到 app.vue 当中
<template>
<div id="app">
<div ref="div">
Test DOM
</div>
<Test ref="test"></Test>
</div>
</template>
<script>
import Test from "test.vue";
export default {
mounted() {
console.log(this.$refs.div);
console.log(this.$refs.test);
},
components: {
Test,
},
};
</script>这是打印出来的this.$refs.test并不是我们需要的 DOM 元素，经过查看文档，发现可以使用this.$refs.test.$el获取到我们想要的元素。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-05-31，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号