基于EggBornJS的模块化体系,前端组件不仅可以在本模块使用,也可以跨模块使用

1. 本模块使用

由于前端组件本身就是Vue组件,因此只需按常规方式直接在模块内部使用

2. 跨模块使用:全局模块

如果组件的meta.global设置为true,系统就会自动把该组件注册到Vue的全局组件清单中。模块a-components内置了大量全局组件,比如其中的eb-link,我们可以使用如下:

src/suite-vendor/test-party/modules/test-party/front/src/kitchen-sink/pages/buttonEvent.vue

  1. 1<f7-nav-right>
  2. 2 <eb-link iconMaterial="save" :onPerform="onPerformTrue"></eb-link>
  3. 3</f7-nav-right>

3. 跨模块使用:局部模块

为了避免污染全局空间,更多业务模块提供的组件是局部组件。局部组件的使用需要注意两方面:

  1. 大多数业务模块是异步加载模式,因此在跨模块使用时要确保该模块已经加载完毕

  2. 当模块加载完毕后,需要把组件注册到使用方的组件清单中,从而让Vue可以检索到

3.1 如何使用

模块test-party提供了一个专门用于测试的组件loadComponentAsync,下面我们采用异步加载的方式使用该组件:

src/suite-vendor/test-party/modules/test-party/front/src/kitchen-sink/pages/component/loadComponentAsync.vue

  1. 1<template>
  2. 2 <eb-page>
  3. 3 ...
  4. 4 <f7-block-title>by manual</f7-block-title>
  5. 5 <f7-block inset>
  6. 6 <template v-if="componentReady">
  7. 7 <loadComponentAsync>
  8. 8 <div slot="scoped" slot-scope="{ user }" class="alert-info">Slot: scoped - {{ user.name }}</div>
  9. 9 <div slot="named" class="alert-info">Slot: named</div>
  10. 10 <div class="alert-info">Slot: default</div>
  11. 11 </loadComponentAsync>
  12. 12 </template>
  13. 13 </f7-block>
  14. 14 </eb-page>
  15. 15</template>
  16. 16<script>
  17. 17export default {
  18. 18 data() {
  19. 19 return {
  20. 20 componentReady: false,
  21. 21 };
  22. 22 },
  23. 23 created() {
  24. 24 this.init();
  25. 25 },
  26. 26 methods: {
  27. 27 async init() {
  28. 28 // load module
  29. 29 const moduleTestParty = await this.$meta.module.use('test-party');
  30. 30 // create component
  31. 31 let component = moduleTestParty.options.components['loadComponentAsync'];
  32. 32 component = this.$meta.util.createComponentOptions(component);
  33. 33 // register component
  34. 34 this.$options.components['loadComponentAsync'] = component;
  35. 35 // ready
  36. 36 this.componentReady = true;
  37. 37 },
  38. 38 },
  39. 39};
  40. 40</script>

script

  • 行24:在created事件中执行初始化方法

  • 行29:使用this.$meta.module.use异步加载模块test-party。如果该模块已经存在则直接返回

  • 行31:从模块test-party中取得组件loadComponentAsync

  • 行32:调用this.$meta.util.createComponentOptions对该组件进行内部处理

  • 行34:将组件注册到使用方的组件清单内

  • 行36:将componentReady设置为true

template

  • 行6:只有componentReadytrue时才渲染组件,否则会提示找不到组件loadComponentAsync

  • 行7:使用名称loadComponentAsync渲染组件

3.2 动态组件

模块a-components提供了一个内置组件eb-component,将上述跨模块异步加载组件的机制进行了封装,从而显著提升开发效率。下面我们采用eb-component的方式使用该组件:

src/suite-vendor/test-party/modules/test-party/front/src/kitchen-sink/pages/component/loadComponentAsync.vue

  1. 1<template>
  2. 2 <eb-page>
  3. 3 ...
  4. 4 <f7-block-title>by eb-component</f7-block-title>
  5. 5 <f7-block inset>
  6. 6 <eb-component module="test-party" name="loadComponentAsync">
  7. 7 <div slot="scoped" slot-scope="{ user }" class="alert-info">Slot: scoped - {{ user.name }}</div>
  8. 8 <div slot="named" class="alert-info">Slot: named</div>
  9. 9 <div class="alert-info">Slot: default</div>
  10. 10 </eb-component>
  11. 11 </f7-block>
  12. 12 ...
  13. 13 </eb-page>
  14. 14</template>
  15. 15<script>
  16. 16...
  17. 17</script>
  • 行6:将modulename传入组件eb-component即可