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 can put a function like this on your component to do this. I put mine in a Mixin:

  public findRefByName(refName) {
    let obj = this
    while (obj) {
      if (obj.$refs[refName]) {
        return obj.$refs[refName]
      }
      obj = obj.$parent
    }
    return undefined
  }

I also added some accessors to help:

  get mycomponent() {
    return this.findRefByName('mycomponent')
  }

And once that exists, you can access your component by simply doing:

this.mycomponent

Answer 2

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

Answer 3

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.