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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

在 Vue 当中获取 DOM 元素 Vue 提供了 this.$refs.xx 的方法，但是这种方式只能够获取到 DOM 元素，不能够获取到 Vue Component 里面的内容。

# 二、获取 Vue Component

# 1、新建如下 Vue 文件

// test.vue
<template>
  <div>
    Test
  </div>
</template>
<script>
export default {};
</script>

1
2
3
4
5
6
7
8
9

# 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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

这是打印出来的 this.$refs.test 并不是我们需要的 DOM 元素，经过查看文档，发现可以使用this.$refs.test.$el获取到我们想要的元素。

帮助我修改此页面

上次更新: 2022/11/20, 18:28:09

← Vuex Vue中的防抖函数封装和使用→