Как получить элемент DOM одного компонента из другого?

Question

[QWERTY01]

Есть компонент, и если его DOM элементы мы можем получить в этом же компоненте при помощи refs.

1) То как в этом компоненте получить ref DOM-элементов, которые находятся в другом компоненте?
2) А как получить элемент body в компоненте?
Можно ли использовать document.querySelector в таких случаях или есть другое более правильное решение?

Comments

[Ярослав Иванов]

зачем вам дум элемент во vue ?
Во вью надо работать с логикой и данными. Доступ к элементу не нужен. Только если есть очень старая библиотека и она зачем-то нужна.

[QWERTY01]

Ярослав Иванов, просто нужно сделать навигацию по странице, то есть собрать айдишники всех компонентов и в компоненте, в котором в котором реализовано само меню нужно написать логику, где соответственно по айдишникам остальных будет производиться сама навигация (window.scrollTo).

[Ярослав Иванов]

QWERTY01, Нарисуйте. Ниче не понятно. Роутинг что ли ? SPA делаете ?

[QWERTY01]

Ярослав Иванов, не, не роутинг, а простая навигация на сайте, скриншот ниже.
То есть нажимаем например на пункт "О нас" и страница автоматически скролиться до этого раздела вниз.

Само меню это тоже отдельный компонент, и в нем нужно прописать логику скрола, то есть соответственно здесь нужно получить высоту каждого из этих компонентов, чтобы знать на какую высоту скролить.

[Ярослав Иванов]

QWERTY01,
https://www.npmjs.com/package/vue-scrollto
https://www.npmjs.com/package/vue2-smooth-scroll

[QWERTY01]

Ярослав Иванов, блин, а вручную сложно будет такое реализовать?
Просто на том же jquery строк в 10 можно было уложиться((

[Ярослав Иванов]

QWERTY01, Vue не для приложений на 10 строк. На БЕЛазе можно в соседний магазин заехать но зачем ? Vue хорош на крупных проектах.

[QWERTY01]

Ярослав Иванов, да, ну это понятно, но просто целый плагин для такой, казалось бы обычной и типичной, задачи?
Неужели все так и делают работая с vue?

[Ярослав Иванов]

QWERTY01, 50/50.

[QWERTY01]

Ярослав Иванов, спасибо, если "вручную" не получится, тогда скачаю плагин

Answer 1

[Николай Чуприк]

Надо придерживаться архитектуры Vue: в компонент — данные, из компонента — события. Я вижу это так, компонент-менюшка получает от родителя массивом список ID всех элементов страницы, по которым нужна навигация. При выборе (в меню) какого-то элемента, компонент-менюшка отправляет "наверх" событие с ID выбранного элемента.

На это событие может подписаться родитель менюшки и осуществлять по нему нужный скрол. Либо на него могут подписаться сами элементы, и в случае если событие касается их, то делать, что им там надо в такой ситуации.

Comments

[QWERTY01]

Главный вопрос, как получить-то высоту этих компонентов, чтобы знать на сколько пикселей скролить?
использовать getElementById/querySelector? - но ведь это не рекомендуется, нужно использовать refs, тогда мы все равно в утыкаемся в то, что нужно ref одного компонента передать другому.

[Николай Чуприк]

Менюшка ничего сама скролить не должна. Она должна отчитаться родителю: "нажали на такой-то пункт меню". Ну а родитель — он должен знать, где у него какие элементы на странице (на то он и родитель), какие у них расположение и размеры. Скролить должен родитель.

Answer 2

[Илья Терещенко]

1. Если работаете с vuex, то в хуке компонента в mounted можно записать в переменную state во vuex нужный вам элемент.
2. Если компоненты работают одновременно, то можете задать ID элементу и обращаться к нему в другом компоненте.
Но нужно ли вам все это?

Comments

[QWERTY01]

А можете в комментарии посмотреть, там я более подробно описал проблему. Может быть вы знаете иной вариант для этой задачи?

[Илья Терещенко]

QWERTY01, я лично для таких целей использую директиву Vue scroll to. Можно реализовать и самому, если так хочется. Тут тогда нативный js. Получаете ID элементов через getElementById, и там уже делаете с ними все что вам. Другими средствами никак.

[QWERTY01]

Илья Терещенко, вот в том и загвоздка, что через getElementById/querySelector все получается, но как я понял таким образом получать элементы ДОМ крайне не рекомендуется во vue, вместо этого принято использовать refs.
Отсюда и вопрос про refs у другого компонента