Component

2018-11-26 03:15:10

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

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

组件定义

请参考Vue组件的用法

<template>
</template>
<script>
export default {
  meta: {
    component: false,
    global: false,
    size: 'small',
    title: 'Sign in',
  },
  data() {
    return {};
  },
  methods: {
  },
};
</script>
<style scoped>
</style>

组件注册

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

如果前端组件需要被其他模块使用,则需要在模块的components清单中注册。系统会自动把全局组件注册到Vue的全局组件清单中

src/module/test-todo/front/src/components.js

import todoItem from './components/todo/item.vue';

export default {
  todoItem,
};

meta元数据

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

meta: {
    component: false,
    global: false,
    size: 'small',
    title: 'Sign in',
},
名称 缺省值 说明
component true 组件注册时有效。如果不作为UI组件使用,可将component设为false
global true 组件注册时有效。如果不需要注册到Vue的全局组件清单,则将global设为false
size small 组件的显示尺寸,有三种选择:small/middle/large
title 组件的标题,主要用于PC模式下顶部Tabs导航栏的文本显示

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

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

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

  • 如果组件仅仅包含代码逻辑,不用于UI场景,就可以将component设为false
  • 比如模块a-base提供的组件ebActions,封装了所有模块的所有原子类型的所有原子指令的基础操作,虽然是跨模块使用,但不用于UI场景,所以可以将component设为false

组件上下文

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

Framework7注入

名称 类型 说明
$$ Function 通过Dom选择器获取Dom对象
$device Object 设备信息
$f7 Object Framework7应用对象
$f7route Object 当前页面路由信息
$f7router Object 页面路由导航器
$utils Object Framework7提供的工具对象

EggBorn注入

名称 类型 说明
$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提供的工具对象


评论: