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

<template>
</template>
<script>
export default {
  meta: {
    component: true,
    global: true,
    size: 'small',
    title: 'page title',
  },
  data() {
    return {};
  },
  methods: {
  },
};
</script>
<style scoped>
</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/module/test-party/front/src/components.js

import helloGlobal from './kitchen-sink/components/helloGlobal.vue';

export default {
  helloGlobal,
};

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

meta: {
    component: false,
    global: false,
    size: 'small',
    title: 'page title',
},
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, middle, 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