Access $refs from other components not in the same level as current component

Question

I\'m working on a Vue application. It has a header and then the main content. Nesting and structure as below

TheHeader.vue -> TheLogin.vue

MainContent.vu         


        

Answer 1

For anyone who comes here later and wants to access $refs in parent component, not in this particular case for emitting events since event bus or a store would suffice but let's just say you want to access some element in parent to get it's attributes like clientHeight, classList etc. then you could access them like:

this.$parent.$parent.$refs //you can traverse through multiple levels like this to access $ref property at the required level