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

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

组件定义

请参考Vue组件的用法

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

组件注册

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

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

src/module-vendor/test-party/front/src/components.js

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

- 组件注册的意义

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

meta元数据

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

  1. 1meta: {
  2. 2 global: false,
  3. 3 size: 'small',
  4. 4 title: 'page title',
  5. 5},
名称 缺省值 说明
global false 如果不需要注册到Vue的全局组件清单,则将global设为false
size small 页面组件的显示尺寸,有三种选择:small/medium/large
title 页面组件的标题,主要用于PC模式下顶部Tabs导航栏的文本显示

什么样的场景,在组件注册时,需要将global设为true?

  • 这主要取决于组件的适用场景和使用频率
  • 比如模块a-components提供的大多数组件,如eb-link,适用场景广,使用频率高,因此作为全局组件
  • 比如模块a-layoutmobile提供的组件layout,仅由egg-born-front使用,虽然是跨模块使用,但适用场景单一,使用频率低,就没有必要作为全局组件注册到Vue的全局组件清单中

组件上下文

EggBornJSFramework7均向组件上下文注入了许多核心特性,可有效提升前端开发的便利和效率

- 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提供的工具对象