如何使用Vue.js获取呈现dom元素的组件

Question

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

Answer 1

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.)

Answer 2

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.

Answer 3

获得this.$parent是指组件的父代。