相关视频

介绍

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/suite-vendor/test-party/modules/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},
名称 缺省值 说明
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提供的工具对象