Question

如果您已经创建了这样的VueJS实例......

var app = new Vue（{ el：＆＃39;＃app＆＃39;，组件： {...} }）

是否可以将组件添加到此实例中？[/ p>

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

Master.js 的 Contact.js

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

真的很感激任何帮助。

Answer 1

感谢@thanksd

似乎只有在实例化Vue时才需要注册组件，如果你想要注册的＆＃34;本地＆＃34;，这意味着只要组件代码你就不必注册它们在Vue实例化之前出现。

因此，我的主模板和 master.js 可以包含此内容...

while( arrIndex< ARR_SIZE){
      cout << "Enter a number (negative to quit): ";
      cin >> number;
      if (number<0)
         break;
      if ((!ifExists(arr, 10, number)))
      {
         arr[arrIndex++] = number;
      }   
 }

然后，我的 contact.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'
})

Answer 2

我们遇到了类似的麻烦，包括多个页面，一个布局以及多个组件。我们的系统不是SPA。每页重新加载。页面内容将通过服务器代码插入具有某些全局选项的全局布局中。

我们有全局组件，还有一些按页面指定的组件，我们的解决方案是使用window来捕获Vue并在按页面收费后初始化vue。

重要提示：请遵循以下订单声明：windowVue /专用于页面的代码/ startVue

EX：

布局文件：

<!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文件组件被声明为对象。

component-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实例

2 个答案: