Javascript 将所有vue组件添加到窗口阵列

我目前有一个奇怪的Vue设置，因为我们的网站都使用旧系统

我们要做的是为每个组件（通常不是很多）创建一个Vue实例。我想为所有组件做的是将它们的名称和对元素的引用传递到一个数组中，只是在调试实时问题时作为参考

app.js

import Vue from "vue";
import Axios from 'axios';
import inViewportDirective from 'vue-in-viewport-directive';

window.components = [];

Vue.component( 'video-frame', () => import('./components/VideoFrame.vue' /* webpackChunkName: "video-frame" */) );

Vue.prototype.$event = new Vue();
Vue.prototype.$http = Axios;

Array.prototype.forEach.call(document.querySelectorAll(".app"), (el, index) => new Vue({el}));

现在，我正在为每个组件添加以下代码，在我的app.js中是否有一种方法可以执行一次，并让所有组件自动执行以下操作：

mounted() {
    window.components.push({
        tag: this.$vnode.tag,
        elm: this.$vnode.elm
    });
},

---

您可以像这样使用全局mixin：

Vue.mixin({
    mounted: function() {
        window.components.push({
            tag: this.$vnode.tag,
            elm: this.$vnode.elm
        });
    }
});

这将确保代码在每个Vue实例上的挂载钩子上运行

---

参考资料：

我能想到的最简单的方法是将整个页面包装在一个单亲组件中，并使用

$children

跟踪others@Ayrton是的这是我们的问题，由于旧网站上的HTML数量太多，我们无法执行此操作。因此，您不能使用mixin，因为您每次都重新创建Vue实例？似乎没有及时创建组件，在挂载的钩子中出现以下错误

错误：“TypeError:无法读取未定义的属性“tag”

我在上面创建了每个Vue组件的mixin代码，并将其放在下面。谢谢