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

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>


  

 

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

控制台输出：

文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。

原文链接：shq5785.blog.csdn.net/article/details/112987858