创建实例后向 Vue 实例添加组件答案

【问题标题】：Add components to Vue instance after instance is created创建实例后向 Vue 实例添加组件
【发布时间】：2018-01-17 12:15:19
【问题描述】：

如果你已经创建了一个像这样的 VueJS 实例......

var app = new Vue({ 埃尔：'#app'，成分： {...} })

是否可以将组件添加到它实例化的实例中？

我问的原因是我们有一个盯着模板的多页应用程序。我们希望 Vue 应用程序的实例化在共享模板代码中，但我们希望每个页面使用不同的组件，例如联系人页面上的代码将在两个文件之间拆分...

Master.js Contact.js

contact.js 文件需要告诉主应用它想要使用 conract-form 组件，但该组件没有在其他页面上使用，所以我们不想将它添加到初始应用声明中master.js

任何帮助将不胜感激。

【问题讨论】：

听起来你想要vue-router。或者如果没有，也许dynamic components
谢谢，但是从该文档中动态组件仍然需要您在实例化主 Vue 实例时列出要在主 Vue 实例中使用的组件。我需要在后续的 js 文件中添加（或不添加）它们。
缺少文档，但不需要在实例化之前列出组件。这只是他们给出的例子。您可以随时通过v-bind:is="" 指令动态传递带有组件定义的对象。
酷，我试试，谢谢。如果可行，请将其添加为答案，以便我标记为正确:)
嗯，我只是在不使用动态组件的情况下尝试了它，即使您在实例化 Vue 时没有指定要使用哪些组件，它似乎也可以使用普通组件。这应该有效吗？如果是这样，那么我想我有我的答案。

标签： vue.js vuejs2 vue-component

【解决方案1】：

感谢@thanksd

似乎组件只需要在实例化 Vue 时注册，如果你想“本地”注册，这意味着你根本不需要注册它们，只要组件代码在 Vue 实例化之前出现。

所以，我的 主模板 和 master.js 可以包含这个...

<div id="app">

    <header>Master header</header>

    <contact-page inline-template>
        Contents of contact page
    </contact-page>

    <footer>Master Footer</footer>

</div>

var app = new Vue({
  el: '#app'
})

然后，我的 contact.js 可以包含这个....

Vue.component('contact-page', {
    ... Contact page specific code here...
});

【讨论】：

【解决方案2】：

我们遇到了类似的问题，有多个页面、一个布局和多个组件。我们的系统不是 SPA。每个页面重新加载。页面内容通过服务器代码插入到具有一些全局选项的全局布局中。

我们有全局组件和一些更具体的页面，我们的解决方案是使用window捕获Vue并在按页面加载组件后初始化vue。

重要提示：遵循此顺序声明：windowVue / 页面特定代码 / startVue

前：

布局文件：

<!doctype html>
<html>
  <head>
    <script type="text/javascript" src="../js/windowVue.js"></script>
    <!-- all header content -->
    <!-- depend your system here call your js specific by page ex: productPage.js -->
    <script type="text/javascript" src="../js/productPage.js"></script>
  </head>

  <body>
    <div id="vueApp">
      <!-- Your page content-->  
    </div>
    <script type="text/javascript" src="../js/startVue.js"></script>
  </body>
</html>

windowVue.js

import Vue from 'vue';

window.Vue = Vue;

productPage.js

// Here two options declare the external components only 
import ComponentA from '../js/components/component-a.js';
import ComponentB from '../js/components/component-b.vue';

window.Vue.component('component-a', ComponentA)
window.Vue.component('component-b', ComponentB)

// Or if you use a page component with more logic and options you can declare here
// and include the other components as usual
window.Vue.component('product-page', {
  components: {
    ComponentA,
    ComponentB
  },
  // rest of the code as usual
})

startVue.js

import GlobalA from '../js/components/global-a.js';
import GlobalB from '../js/components/global-B.js';

new window.Vue({
  el:"#vueApp",
  delimiters: ['${', '}'],
  components: {
    GlobalA,
    GlobalB
  }
})

现在每个页面都有自己的组件，我们也有一些共享组件。

一些备注：

单独构建3个js部分
只有 windowVue.js 使用import Vue from 'vue'，其余使用window.Vue。
.js 文件组件被声明为对象。

组件-a.js

import ComponentB from '../js/components/component-b.vue';
import ComponentC from '../js/components/component-c.vue';
import ComponentD from '../js/components/component-d.vue';

export default {
  name:'component-a',
  components: {
    ComponentB,
    ComponentC,
    ComponentD
  },
  data() {
    return {
      variableExample: 'example'
    }
  } // more of your Vue code
}

【讨论】：