javascript - 将所有 vue 组件添加到 window 数组

Question

由于我们的网站都使用旧系统，我目前有一个奇怪的 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
    });
},

Answer 1

您可以像这样使用全局混合:

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

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

引用:https://v2.vuejs.org/v2/guide/mixins.html