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

You definitely don't want to be reaching through the hierarchy like that. You are breaking encapsulation. You want a global event bus.

And here's a secret: there's one built in, called $root. Have your OrderSummary do

this.$root.emit('openPopup');

and set up a listener in your TheLogin's created hook:

this.$root.on('openPopup', () => this.$emit('open'));

In general, you should try to avoid using refs.