How to get DOM element of one component from another in VUE.JS?

Question

JavaScript

There is a component, and if we can get its DOM elements in the same component using refs.

1) How to get the ref of DOM elements that are in another component in this component?
2) And how to get the body element in the component?
Can document.querySelector be used in such cases, or is there another better solution?

Answer 1

We must adhere to the Vue architecture: into the component - data, from the component - events. I see it this way, the menu component receives from the parent with an array a list of IDs of all page elements that need to be navigated. When an element is selected (in the menu), the menu component sends an "up" event with the ID of the selected element.
The parent of the menu can subscribe to this event and perform the necessary scrolling on it. Or the elements themselves can subscribe to it, and if the event concerns them, then do what they need there in such a situation.

Answer 2

1. If you work with vuex, then in the mounted component hook you can write the element you need to the state variable in vuex.
2. If the components work at the same time, then you can set the ID to the element and access it in another component.
But do you need all this?