Почему возникает проблема с ref, при импорте в components?

Question

[Владимир Голубь]

Делаю импорт компонента:

...
    components: {
      MainSection: () => import('@/components/pages/sections/MainSection'),
...

Внутри него при обращении в ref в mounted, выдает undefined.
Работает только через:

setTimeout(() => {
        console.log(this.$refs.screenImg);
      }, 0);

Answer 1

[Антон Антон]

https://ru.vuejs.org/v2/api/#ref

Важное замечание о времени регистрации ссылок: поскольку ссылки создаются render-функцией, вы не сможете использовать их при первичной отрисовке — на тот момент они ещё не существуют! Кроме того, объект $refs не является реактивным, поэтому не стоит пытаться использовать его в шаблонах для связывания данных.

Comments

[Владимир Голубь]

Тогда каким образом высчитать размер элемента ? Если компонент используется несколько раз ?
document.getElementsByClassName, вызовиться несколько раз. Как сделать вызов только один раз ?

[Антон Антон]

Владимир Голубь, то, что нужно какие-то размеры вычислять - только сейчас было сказано. Можно, например в самом компоненте вычислять его размеры (без query selector, а через $el) и эмитить их в родителя.
Но ведь при любом изменении данных возможно изменение этих самых размеров. Так что лучше от этого избавиться.
Очень часто можно переписать верстку таким образом, чтобы размеры были не нужны.
Много вариантов, выбирать из которых нужно, когда известная вся задача.

[Владимир Голубь]

Антон Антон, импортирую на страницу через import в components компонент.
Внутри компонента в цикле mounted обращаюсь к элементу компонента через ref.
console.log(this.$refs.screenImg);
Даже при таком выводе без setTimeout выводит undefined, при обычном импорте в работает.

[Владимир Голубь]

Антон Антон, про $el не знал, буду его использовать