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

关注

发布于: 2021 年 07 月 31 日

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>