CODEWITHSUNDEEP
javascriptvuejs2
hl037_
hl037_

Reputation: 3867

How to get the component that rendered a dom element with Vue.js

How to get the component that rendered a dom element with Vue.js ?

For example, suppose you want to retrieve which component "owns" a dom element that the user has selected, how would you do ? (it seems to be implemented in the dev tools, but I can't find a way neither in the documentation, neither on SO)

(I mean, given the DOM element, I know how to retrieve what element is selected)

DISCLAIMER : This may not be the right solution for common use cases. Always prefer handling event & co. in the root component using direct sub-component reference if you can

Upvotes: 2

Views: 1926

Answers (3)

Daniel Beck
Daniel Beck

Reputation: 21475

I do not know if this is safe or officially supported, but assuming you're trying to access the component from some external-to-Vue code, this will return the VueComponent object for a given DOM element (substitute your own DOM selector as needed):

document.getElementById('foo').__vue__

If used on the app's root element, it will instead return the Vue constructor object.

(This appears to work in both Vue 1.x and 2.x.)

Upvotes: 2

tom_h
tom_h

Reputation: 905

This is possibly not the most elegant solution, but you can use mixins to achieve this:

var elemOwner = {
  mounted: function() {
    this.$el.setAttribute("isVueComponent", this.$options.name);
  }
};

As long as you set the mixin to the components you need it in, when you click an element you can test the attributes to see if there's a component name in there.

See this codepen for a fuller example: https://codepen.io/huntleth/pen/EpEWjJ

Clicking the smaller blue square will return the component name of the component that rendered it.

EDIT - It should be noted though that this obviously would only work if the element is actually inside that components root element. I think that would be the case for almost all uses.

Upvotes: 1

Mahdi Aryayi
Mahdi Aryayi

Reputation: 1120

Getting this.$parent refers to the parent of a component.

Upvotes: -1

Related Questions