基于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<f7-nav-right>
- 2 <eb-link iconMaterial="save" :onPerform="onPerformTrue"></eb-link>
- 3</f7-nav-right>
3. 跨模块使用:局部模块
为了避免污染全局空间,更多业务模块提供的组件是局部组件
。局部组件的使用需要注意两方面:
-
大多数业务模块是
异步加载
模式,因此在跨模块
使用时要确保该模块已经加载完毕 -
当模块加载完毕后,需要把组件注册到使用方的
组件清单
中,从而让Vue可以检索到
3.1 如何使用
模块test-party
提供了一个专门用于测试的组件loadComponentAsync
,下面我们采用异步加载
的方式使用该组件:
src/suite-vendor/test-party/modules/test-party/front/src/kitchen-sink/pages/component/loadComponentAsync.vue
- 1<template>
- 2 <eb-page>
- 3 ...
- 4 <f7-block-title>by manual</f7-block-title>
- 5 <f7-block inset>
- 6 <template v-if="componentReady">
- 7 <loadComponentAsync>
- 8 <div slot="scoped" slot-scope="{ user }" class="alert-info">Slot: scoped - {{ user.name }}</div>
- 9 <div slot="named" class="alert-info">Slot: named</div>
- 10 <div class="alert-info">Slot: default</div>
- 11 </loadComponentAsync>
- 12 </template>
- 13 </f7-block>
- 14 </eb-page>
- 15</template>
- 16<script>
- 17export default {
- 18 data() {
- 19 return {
- 20 componentReady: false,
- 21 };
- 22 },
- 23 created() {
- 24 this.init();
- 25 },
- 26 methods: {
- 27 async init() {
- 28 // load module
- 29 const moduleTestParty = await this.$meta.module.use('test-party');
- 30 // create component
- 31 let component = moduleTestParty.options.components['loadComponentAsync'];
- 32 component = this.$meta.util.createComponentOptions(component);
- 33 // register component
- 34 this.$options.components['loadComponentAsync'] = component;
- 35 // ready
- 36 this.componentReady = true;
- 37 },
- 38 },
- 39};
- 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:只有
componentReady
为true
时才渲染组件,否则会提示找不到组件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<template>
- 2 <eb-page>
- 3 ...
- 4 <f7-block-title>by eb-component</f7-block-title>
- 5 <f7-block inset>
- 6 <eb-component module="test-party" name="loadComponentAsync">
- 7 <div slot="scoped" slot-scope="{ user }" class="alert-info">Slot: scoped - {{ user.name }}</div>
- 8 <div slot="named" class="alert-info">Slot: named</div>
- 9 <div class="alert-info">Slot: default</div>
- 10 </eb-component>
- 11 </f7-block>
- 12 ...
- 13 </eb-page>
- 14</template>
- 15<script>
- 16...
- 17</script>
- 行6:将
module
和name
传入组件eb-component
即可
评论: