vue组件中this和$el指向

最新推荐文章于 2024-07-29 14:26:01 发布

她说她说

最新推荐文章于 2024-07-29 14:26:01 发布

阅读量1.1w

点赞数 5

分类专栏： vue2 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_43203982/article/details/117925988

版权

vue2 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文探讨了Vue组件中this的指向及其在mounted生命周期钩子中的应用。this指向组件实例，允许访问组件的方法和属性。而$el属性在mounted之后才有效，它引用了Vue组件模板的根DOM元素，可用于直接操作DOM，如改变颜色。在示例代码中，$el用于设置h1元素的颜色。同时，fn方法展示了在方法内部，$el同样可以正确引用到组件的根元素。

摘要由CSDN通过智能技术生成

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>