提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Java

当前栏目

Vue 获取渲染后的 DOM

2023-02-18 16:37:32 时间

# 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获取到我们想要的元素。

相关文章