如何使用Vue.js獲取呈現dom元素的組件

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是指組件的父代。