Access owner component from child component

Get Help
#1

If this is the parent component…

component-a.vue:

<template>
  <component-b>
    <component-c></component-c>
  </component-b>
</template>

… is there a way to find the instance of component-a from inside component-c?

Essentially…

component-c.vue:

<script>
  export default {
    mounted() {
      console.log('I was instantiated in: ' + $???.$options._componentTag);
    }
  }
</script>

… should print “I was instantiated in: component-a”.

I think in React component-a is said to be the “owner component” of component-c.

#2

Well component-c has a $parent which will be component-b, not component-a.

I’m not sure if there is a direct way to reference the component whose scope the component-c is actually compiled in.

#3

this.$parent.$parent would work, assuming that the parent you want is always two levels up.

#4

Of course it’s not, that’s the point of the question. :slight_smile: That’s also the reason why there is a distinction between parent component and owner component.

#5

The distinction is present in vue as well.

What exactly do you want to do with the “owner” component instance?

#6

I wanted to get rid of the :refs="$refs" in Split modal and its contents - slots?, so I tried to use $parent.refs instead of this.refs and found that it points to, well, the parent, but the ref I want is in the owner.