写点什么

Vue 进阶(幺陆陆):组件实例 $el 详解

发布于: 2021 年 07 月 31 日
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>
复制代码


控制台输出:





发布于: 2021 年 07 月 31 日阅读数: 5
用户头像

No Silver Bullet 2021.07.09 加入

岂曰无衣 与子同袍

评论

发布
暂无评论
Vue进阶(幺陆陆):组件实例 $el 详解