Vue获取组件渲染后的DOM

Vue获取组件渲染后的DOM

vue 中获取元素的 DOM 时，有两种情况。一种是获取普通元素的 DOM ，另一种是获取组件渲染后的 DOM 。

两者都需要给元素设置 ref 属性，都需要使用 $refs 获取 DOM ，但是略有区别。

1.获取普通元素DOM

在 vue 中获取 DOM 元素，直接给需要获取的 DOM 标签添加 ref 属性，然后通过 $refs.属性名 即可获取 DOM 。

1.1 先设置 ref 属性：

<template>
  <div class="about" ref="about">
    <h1>This is an about page</h1>
  </div>
</template>

1.2 然后通过$refs获取DOM

this.$refs.about

2.获取组件渲染后的DOM

和 1. 中的操作几乎一样。也是设置 ref 属性，但是使用的是 $refs.属性名.$el 获取组件渲染后的 DOM 。

2.1 给组件标签设置ref属性

<template>
  <test ref="about"></test>
</template>

2.2 使用$refs.about.$el获取组件渲染的DOM

需要使用 $el 才能获取到组件渲染后的 DOM

this.$refs.about.$el

这样获取到的才是组件渲染后的DOM 。