## 相关视频
* B站视频:[模块前端异步加载策略](https://www.bilibili.com/video/BV1pd4y1Q76z/?vd_source=8a2b870d6d5dc83f8f4b973c95613fd8)
* B站视频:[前端页面跳转](https://www.bilibili.com/video/BV1Hd4y1S7Pj/?vd_source=8a2b870d6d5dc83f8f4b973c95613fd8)
* B站视频:[页面结构与页面打开方式](https://www.bilibili.com/video/BV1d34y1J7kS/?vd_source=8a2b870d6d5dc83f8f4b973c95613fd8)
* B站视频:[前端组件异步使用](https://www.bilibili.com/video/BV1rG411H7Qz/?vd_source=8a2b870d6d5dc83f8f4b973c95613fd8)
## 介绍
EggBornJS的`前端组件`也就是`Vue组件`,在以下方面进行了增强:
1. UI组件采用`Framework7`,并进行了强化
2. 系统向`组件上下文`注入了许多核心特性
## 组件定义
请参考`Vue组件`的用法
``` html
```
## 组件注册
大多数场景下,定义的`前端组件`只在模块内部使用,因此不需要在模块的`components`清单中注册
如果`前端组件`需要被其他模块使用,则需要在模块的`components`清单中注册
`src/suite-vendor/test-party/modules/test-party/front/src/components.js`
``` javascript
import helloGlobal from './kitchen-sink/components/helloGlobal.vue';
export default {
helloGlobal,
};
```
### \- 组件注册的意义
1. `跨模块使用`:本模块定义的前端组件可被其他模块使用
2. `注入模块信息`:模块前端组件采用了`模块隔离`机制。在一个页面组件树中,如果是本模块的组件嵌入本模块的子组件,那么子组件就会自动得到父组件的`模块信息`。反之,如果是其他模块的组件嵌入本模块的子组件,那么子组件就会错误的得到`其他模块信息`。在这种情况下,本模块的子组件就需要进行`注册`,以便系统正确注入`模块信息`,从而使`模块隔离`机制正常运行
## meta元数据
`组件`可提供`meta`元数据,以便标示`组件`的行为
``` javascript
meta: {
global: false,
},
```
| 名称 | 缺省值 | 说明 |
|----|----|----|
| global | false | 如果不需要注册到Vue的`全局组件`清单,则将`global`设为`false` |
> 什么样的场景,在`组件注册`时,需要将`global`设为`true`?
>
> * 这主要取决于`组件`的适用场景和使用频率
> * 比如模块`a-components`提供的大多数组件,如`eb-link`,适用场景广,使用频率高,因此作为`全局组件`
> * 比如模块`a-layoutmobile`提供的组件`layout`,仅由`egg-born-front`使用,虽然是`跨模块使用`,但适用场景单一,使用频率低,就没有必要作为`全局组件`注册到Vue的`全局组件`清单中
## 组件上下文
`EggBornJS`和`Framework7`均向`组件上下文`注入了许多核心特性,可有效提升前端开发的便利和效率
### \- Framework7注入
| 名称 | 类型 | 说明 |
|----|----|----|
| $$ | Function | 通过`Dom选择器`获取Dom对象 |
| $device | Object | 设备信息 |
| $f7 | Object | Framework7应用对象 |
| $f7route | Object | 当前页面路由信息 |
| $f7router | Object | 页面路由导航器 |
| $utils | Object | Framework7提供的工具对象 |
### \- EggBornJS注入
| 名称 | 类型 | 说明 |
|----|----|----|
| $api | Object | 访问后端`API路由` |
| $config | Object | 本模块的`参数配置` |
| $local | Object | 本模块的`状态管理`对象 |
| $store | Object | 全局`状态管理`对象 |
| $module | Object | 本模块的基本信息 |
| $text | Function | 获取`语言资源`字符串 |
| $view | Object | 获取当前组件所属的`View组件` |
| $meta | Object | 元对象 |
### $meta元对象
| 名称 | 类型 | 说明 |
|----|----|----|
| config | Object | 全局`参数配置`清单 |
| eventHub | Object | 全局`Event Hub` |
| locales | Object | 全局`语言资源`清单 |
| module | Object | 模块`加载器` |
| modules | Object | `已加载模块`清单 |
| moment | Object | `moment`对象 |
| util | Object | EggBorn提供的工具对象 |