Component使用方式

基于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的方式使用该组件：