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

Posted 2021-04-30

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

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

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

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

答案

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

document.getElementById('foo').__vue__

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

（这似乎适用于Vue 1.x和2.x.）

另一答案

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

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

只要将mixin设置为您需要的组件，当您单击一个元素时，您可以测试属性以查看其中是否有组件名称。

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

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

编辑 - 应该注意的是，这显然只有在元素实际位于组件根元素内时才有效。我认为几乎所有用途都是如此。

另一答案

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