Component

The frontend component of EggBornJS is also the Vue Component, and has been enhanced in the following aspects:

1. UI Components adopt framework7 and have been enhanced
2. The System injects many core features into the component context

Definition of Component

Please refer to the usage of Vue Component

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

Component Registration

In most scenarios, the defined components are only used inside the same module, so it is not necessary to register them in the components list of the module

If the components need to be used by other modules, it needs to be registered in the components list of the module. By default (Global: true), the system will automatically register the global component to the global component list of Vue

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};

Why to register component

1. Used across module
2. Injection module information: The module frontend components also adopt the module isolation mechanism. In a page component tree, if the component of this module is embedded in the child component of this module, the child component will automatically get the module information of the parent component. On the contrary, if the components of other modules are embedded in the sub components of this module, the sub components will get the information of other modules by mistake. In this case, the sub components of this module need to be registered so that the system can correctly inject module information, so that the module isolation mechanism can operate correctly

meta

Component can provide metadata to mark the behavior of component

1meta: {
2    component: false,
3    global: false,
4    size: 'small',
5    title: 'page title',
6},

Name	Default	Description
component	true	Valid when the component is registered. If not used as a UI component, set component to false
global	true	Valid when the component is registered. If not to register to the global component list of Vue, set global to false
size	small	There are three display sizes for page components: small, medium, large
title		The title of the page component, which mainly used for the navbar in PC layout

In what scenario, when registering a component, need to set global to false?

• It mainly depends on the application scenario and frequency of the component
• For example, most of the components provided by module a-components, such as eb-link, have a wide range of application scenarios and high frequency of use, so they are used as global components
• For example, the component layout provided by module a-layoutmobile is only used by egg-born-front. Although it is used across modules, it has a single application scenario and low frequency of use, so it is unnecessary to register as a global component in Vue’s global component list

In what scenario, when registering a component, need to set component to false?

• If a component contains only code logic and is not used in UI scenarios, you can set the component to false
• For example, the component ebActions provided by the module a-base encapsulates all the basic operations of all the atom actions of all the atom classes of all the modules. Although it is used across modules, it is not used in the UI Scenario. Therefore, the component can be set to false

Component Context

EggBornJS and Framework7 both inject many core features into component context, which can effectively improve the convenience and efficiency of frontend development

Framework7 Injection

Name	Type	Description
$$	Function	Get DOM object through DOM selector, which is similar to JQuery
$device	Object	Device Information
$f7	Object	Framework7 App Object
$f7route	Object	Curent page route information
$f7router	Object	Page Router
$utils	Object	Utils object, which is provided by Framework7

EggBornJS Injection

Name	Type	Description
$api	Object	For performing the backend API Route
$config	Object	Configuration of current module
$local	Object	State Management Object of current module
$store	Object	Global State Management Object
$module	Object	Current module’s information
$text	Function	Get language resource
$view	Object	Get the component View to which the current component belongs
$meta	Object	metadata

$meta

Name	Type	Description
config	Object	Global Configuration
eventHub	Object	Global Event Hub
locales	Object	Global language resources
module	Object	Module Loader
modules	Object	Module List
moment	Object	moment object
util	Object	util object, which is provided by EggBornJS