Vue进阶（幺陆陆）：组件实例 $el 详解

No Silver Bullet

于 2021-01-23 13:48:09 发布

阅读量9.4k

点赞数 6

分类专栏： # Vue2 文章标签： vue el this

本文链接：https://blog.csdn.net/sunhuaqiang1/article/details/112987858

版权

Vue2 专栏收录该内容

206 篇文章

订阅专栏

本文详细介绍了Vue组件中this的指向及其在mounted生命周期钩子中的应用，重点讲解了$el属性如何获取DOM元素，并通过示例展示了如何在mounted阶段修改DOM样式。同时，文中提及在methods中同样可以访问到$el，强调了$el的有效使用时机。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

this指向组件实例，$el用于获取Vue实例挂载的DOM元素，在mounted生命周期中才有效，之前的钩子函数内无效。如下代码所示，Vue脚手架中，$el指向当前组件template模板中的根标签。

<template>
  <div id="root">
    <h1 @click="fn()">
      Lorem, ipsum
    </h1>
  </div>
</template>
<script>
export default {
  mounted () {
    // this.$el只在mounted中才有效
    console.log('this:', this) // 打印this指向组件实例。
    console.log('this.$el:', this.$el) // 打印这个vue组件的dom对象
    this.$el.style.color = 'red'
  },
  methods: {
    fn () {
      console.log('test_this.$el:', this.$el) // <div id="root">...</div>
    }
  }
}
</script>