Question

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

例如，假设您要检索“拥有”用户选择的dom元素的组件，您将如何做？（它似乎是在开发工具中实现的，但我在文档中和SO上都找不到方法）

（我的意思是，给定DOM元素，我知道如何检索选择的元素）

免责声明：对于常见的用例，这可能不是正确的解决方案。总是喜欢处理事件和合作。如果可以的话，请使用直接子组件引用在根组件中添加

Answer 1

我不知道这是安全的还是得到正式支持，但是假设您尝试从外部到Vue的代码访问该组件，这将返回给定DOM元素的VueComponent对象（替换为您自己的DOM选择器）：

document.getElementById('foo').__vue__

如果在应用程序的根元素上使用，它将返回Vue构造函数对象。

（这似乎在Vue 1.x和2.x中都适用。）

Answer 2

这可能不是最优雅的解决方案，但是您可以使用mixins实现此目的：

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

只要将mixin设置为所需的组件，单击元素时就可以测试属性以查看其中是否存在组件名称。

有关完整示例，请参见此codepen：https://codepen.io/huntleth/pen/EpEWjJ

单击较小的蓝色方块将返回渲染它的组件的组件名称。

编辑-尽管应该注意，这显然仅在元素实际上位于该组件根元素内部时才起作用。我认为几乎所有用途都是如此。

Answer 3

获取this.$parent是指组件的父级。