vue.js - 如何在 Vue3 中正确获取组件的 this.$el？

Question

我有一个组件，它的模板如下所示：

<template>
  <slot />
</template>

我正在尝试制作的功能是关于resize-observer-polyfill. 我正在尝试进入this.$el，mounted()然后创建一个ResizeObserver.

但问题是，如果 slot 的内容是 an async-component，那么我无法this.$el正确获取。

我怎样才能解决这个问题？

标签： vue.jsvuejs3

Answer 1

在 Vue 3 中，您可以使用模板 ref：

<template>
  <div ref="el"></div>
</template>

import { ref, onMounted } from 'vue'

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

    // Not available until the component mounts:
    onMounted(() => {
      console.log(el.value)
    })
      
    return {
      el
    }
  } 
}