创建实例后向 Vue 实例添加组件
Posted
技术标签:
【中文标题】创建实例后向 Vue 实例添加组件【英文标题】：Add components to Vue instance after instance is created 【发布时间】：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 时没有指定要使用哪些组件，它似乎也可以使用普通组件。这应该有效吗？如果是这样，那么我想我有我的答案。
【参考方案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
【讨论】：
以上是关于创建实例后向 Vue 实例添加组件的主要内容，如果未能解决你的问题，请参考以下文章