Vue.js Vue 3 Composition API – 如何获取组件所挂载的元素($el)

在本文中，我们将介绍如何使用Vue 3的Composition API来获取组件所挂载的元素($el)。

什么是组件的$el属性？

在Vue.js中，每个组件都有一个特殊的属性 $el，它代表着组件所挂载的元素。通过$ el属性，我们可以访问并操作组件所在的DOM元素。

在传统的Vue 2中，我们可以直接使用this. $el来获取组件的$ el属性。然而，在Vue 3中，由于Composition API的引入，我们需要采取一些额外的步骤来访问$el。

使用ref函数创建$el的引用

要获取组件的 $el属性，我们首先需要使用Vue 3的Composition API中的ref函数来创建一个引用(reference)。ref函数会接受一个初始值作为参数，并返回一个响应式的引用。$

在组件的setup方法中，我们可以使用ref函数来创建一个el的引用，并将其与组件的DOM元素关联起来。

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const componentElement = ref(null);

    onMounted(() => {
      componentElement.value = document.getElementById('component-element');
    });

    return {
      componentElement
    };
  }
}

在上面的示例中，我们首先使用ref函数创建了一个componentElement的引用。然后，在组件被挂载到DOM中后的生命周期函数onMounted中，我们通过document.getElementById方法找到了组件的DOM元素，并将其赋值给componentElement的value属性。

通过这样的方式，我们成功地创建了一个与组件DOM元素关联的引用。

在组件中使用$el引用

一旦我们创建了 $el的引用，我们就可以在组件的其他地方使用它了。例如，我们可以在模板中使用$ el属性来访问组件的DOM元素。

<template>
  <div>
    <h1>我的组件</h1>
    <div id="component-element" ref="componentElement">我是组件的内容</div>
    <p>组件的DOM元素：{{$el.value}}</p>
  </div>
</template>

在上面的示例中，我们在模板中使用了$el属性，并通过{{}}的插值语法将其值显示在了页面上。