Как правильно получить this. $ El компонента в Vue3?

У меня есть компонент, его шаблон выглядит так:

<template>
  <slot />
</template>

Функция, которую я пытаюсь сделать, примерно resize-observer-polyfill. Я пытаюсь вставить this.$el в mounted(), а затем создать экземпляр ResizeObserver.

Но проблема в том, что если содержимое слота - async-component, то я не могу правильно получить this.$el.

Как я могу это исправить?


vue.js vuejs3
person Shook Lyngs    schedule 25.11.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В Vue 3 вы можете использовать ссылку на шаблон:

<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
    }
  } 
}
person Dan    schedule 25.11.2020