Component（组件）

介绍

EggBornJS的前端组件也就是Vue组件，在以下方面进行了增强：

UI组件采用Framework7，并进行了强化
系统向组件上下文注入了许多核心特性

组件定义

请参考Vue组件的用法

1<template>
2</template>
3<script>
4export default {
5  meta: {
6    global: false,
7    size: 'small',
8    title: 'page title',
9  },
10  data() {
11    return {};
12  },
13  methods: {
14  },
15};
16</script>
17<style scoped>
18</style>

组件注册

大多数场景下，定义的前端组件只在模块内部使用，因此不需要在模块的components清单中注册

如果前端组件需要被其他模块使用，则需要在模块的components清单中注册

src/suite-vendor/test-party/modules/test-party/front/src/components.js

1import helloGlobal from './kitchen-sink/components/helloGlobal.vue';
2
3export default {
4  helloGlobal,
5};

- 组件注册的意义

跨模块使用：本模块定义的前端组件可被其他模块使用
注入模块信息：模块前端组件采用了模块隔离机制。在一个页面组件树中，如果是本模块的组件嵌入本模块的子组件，那么子组件就会自动得到父组件的模块信息。反之，如果是其他模块的组件嵌入本模块的子组件，那么子组件就会错误的得到其他模块信息。在这种情况下，本模块的子组件就需要进行注册，以便系统正确注入模块信息，从而使模块隔离机制正常运行

meta元数据

组件可提供meta元数据，以便标示组件的行为

1meta: {
2  global: false,
3},

名称	缺省值	说明
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提供的工具对象

相关视频

介绍