All Products
Search
Document Center

Component

Last Updated: May 25, 2021

Component is expanded from a Vue.js component and provides parameter input capabilities that are equivalent to the Vue component. It provides Decorator styles for class during code writing.

Code import

 
  1. import { Component, Watch } from '@ali/kylin-framework';

Structure of component declarations

A component can contain peer configurations of the options of Vue, such as data, JSX rendering functions, templates, mounting elements, methods, and life cycles. Component declarations include the following parts, which are separately packaged by using the @Component and @Watch decorators.

  • Declarations of classes, which are packaged by using the @Component decorator.
  • Decorations of class members, which are packaged without using a decorator.
  • Declarations of class member methods, which are packaged usually without using a decorator unless the method needs to watch another declared variable

The following example shows you how to develop a simple component. For information about specific declaration parameters, see Component API.

*.vue single file component

 
  1. <!-- Hello.vue -->
  2. <template>
  3. <div>hello {{name}}
  4. <Child></Child>
  5. </div>
  6. </template>
  7. <style>
  8. /* put style here */
  9. </style>
  10. <component default="Child" src="./child.vue" />
  11. <script>
  12. import { Component } from '@ali/kylin-framework';
  13. @Component
  14. class Hello {
  15. data = {
  16. name: 'world'
  17. }
  18. }
  19. export default Hello;
  20. </script>

For information about the label-style component dependencies in the <component> format, see Component API.

Component API

Similar to Vue, the definition of a component is written in the .vue file. The following code shows a simple example:

 
  1. <template>
  2. <div>
  3. <AButton @click="onClick">Click</AButton>
  4. </div>
  5. </template>
  6. <style lang="less" rel="stylesheet/less">
  7. /* less */
  8. </style>
  9. <dependency component="{ AButton }" src="@alipay/antui-vue" lazy/>
  10. <script type="text/javascript">
  11. import { Component } from '@ali/kylin-framework';
  12. @Component
  13. export default class IndexView {
  14. props = {}
  15. data = {}
  16. get comput() { return this.data.c * 2 }
  17. onClick() {}
  18. mounted() {}
  19. }
  20. </script>

The preceding example contains four top-level labels including <template>, <style>, and <script>, which are similar to those in Vue, and <dependency>.

The following sections describe the usage of the four labels. The definitions of the <template> and <style> labels are the same as those in Vue.

Script

Class structure

Define a Component. Based on the code structure, use Decorators of the class. Available decorators are @Component and @Watch, which can be imported as shown in the following code:

 
  1. import { Component, Watch } from '@ali/kylin-framework';
  2. @Component
  3. export default class Hello {
  4. }

Method type

The Component is declared as a class, and the class must be decorated with a Decorator. Inside a class, member variables are automatically processed by the babel plug-in during the building process. Member functions usually do not require a decorator unless @Watch is used. The following table describes the properties that the @Component decorator can process.

Member type Name Usage
get/set property * Used to convert into the computed property of Vue. You can call this by using this[varName].
beforeCreate Life cycle The life cycle method, which is equivalent to that in Vue.
created Life cycle The life cycle method, which is equivalent to that in Vue.
beforeMount Life cycle The life cycle method, which is equivalent to that in Vue.
mounted Life cycle The life cycle method, which is equivalent to that in Vue.
beforeUpdate Life cycle The life cycle method, which is equivalent to that in Vue.
updated Life cycle The life cycle method, which is equivalent to that in Vue.
beforeDestroy Life cycle The life cycle method, which is equivalent to that in Vue.
destroyed Life cycle The life cycle method, which is equivalent to that in Vue.
method * A regular member method that is used to convert into the method list methods in Vue.

getter/setter property

 
  1. @Component
  2. export default class Hello {
  3. get computName() {
  4. // to sth
  5. }
  6. }

The preceding getter declaration is equivalent to the following Vue configuration:

 
  1. HelloOption = {
  2. computed: {
  3. computName: {
  4. get: computName() {
  5. // to sth
  6. }
  7. }
  8. }
  9. }

Likewise, setter is also extracted. If both getter and setter exist, they are extracted together.

Life cycle functions

 
  1. @Component
  2. export default class Hello {
  3. created() {}
  4. mounted() {}
  5. }

The preceding life cycle functions created and mounted are extracted as arrays.

 
  1. TestOption = {
  2. created: [function created(){}],
  3. mounted: [function mounted(){}],
  4. }

The following life cycle methods are supported: beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, and destroyed.

Watch

This decorator exists because watch requires the following elements:

  • The variables to listen to
  • Listening options
  • Trigger function

Usage

The following table describes all the parameters for the @Watch decorator.

 
  1. function Watch( key: string [, option: Object = {} ] ): PropertyDecorator
Parameter Type Usage
key string The name of the parameter that is listened to. Valid values: computed, data, and props.
option deep boolean Specifies whether an inner data change is triggered when a complex object is listened. Default value: false.
immediate boolean Specifies whether to immediately trigger a callback by using the current value of the expression. Default value: false.

Example

  • For a member function that is decorated by @Watch, you can configure listening of multiple variables for the member function. In the following sample code, changes to the a and c parameters are listened. A change to either of the parameters will trigger the member method OnChangeA.
  • OnChangeA is a member method in nature and is extracted to the methods block together with other member methods. Therefore, make sure that the name of this member method is unique.
  • If there are additional configuration items for Watch, import them by using the @Watch('a', {deep: false}) method. For more information about configuration items, see Watch configuration items.
 
  1. @Component
  2. class WTest {
  3. data = {
  4. a: {
  5. b: 2
  6. },
  7. c: 3
  8. }
  9. @Watch('c')
  10. @Watch('a', {deep: false})
  11. OnChangeA(newVal, oldVal) {
  12. }
  13. }

Note: The listener for data.a is converted. If the deep: true option is disabled, the OnChangeA method is not triggered when data.a.b is changed.

Property types

The build tool automatically applies the @Component.Property decorator to member variables. The final merging strategy depends on the identifier name of the decorated member variable. The following table describes some members that are built in the framework. Members that are not in the following table are passed through to the options object of VueComponent.

Member type Name Usage
Property props The props property of Vue.
Property data The data property of Vue. This property is converted into a function and supports the this method. Do not use data(){}.
Property * Other unknown properties, which are copied to the corresponding properties in the options object of Vue.

props

 
  1. @Component
  2. export default class Hello {
  3. props = {
  4. name: {
  5. type: String,
  6. default: 'haha'
  7. },
  8. num: Number
  9. }
  10. }

The preceding definition of the member variable props is converted into the corresponding props property in the options object.

 
  1. HelloOption = {
  2. props: {
  3. name: {
  4. type: String,
  5. default: 'haha'
  6. },
  7. num: Number
  8. }
  9. }

For information about the complete definition structure, see the API-props topic in the Vue documentation.

data

 
  1. @Component
  2. export default class Hello {
  3. props = {
  4. name: {
  5. type: Number,
  6. default: 1
  7. },
  8. }
  9. data = {
  10. hello: this.props.name + 2
  11. }
  12. }

The preceding definition of the member variable data is converted into a data function. You do not need to manually write a data function.

 
  1. TestOption = {
  2. props: {
  3. name: {
  4. type: Number,
  5. default: 1
  6. },
  7. },
  8. data: function data() {
  9. return {
  10. hello: this.props.name + 2
  11. }
  12. }
  13. }

dependency

In the preceding example, the definition of <script> does not describe how to use component dependencies. We recommend that you use the <dependency> label to mark component dependencies in the .vue file. In the following example, the ./child.vue component is referenced.

 
  1. <template>
  2. <child></child>
  3. </template>
  4. <dependency component="Child" src="./child.vue" />

Label properties

default import

The following table describes the properties that are used for introducing the default export of ES6 Module or the export of the commonjs Module object.

Parameter Type Default value Remarks
component string Required The identifier name to be imported to options.components.
src string Required The source of the component. The value of this property is the same as the result of the require (src) method.
lazy boolean false Specifies whether to enable lazy loading for the component. If lazy loading is enabled, a module of the component is loaded only when Vue requires this module. Modules are loaded by using require.
style string undefined By default, this property is not used. If you set a string for this property, the system loads the corresponding style file of the component by using the ${src}/${style} path.

The following code shows an example:

 
  1. <dependency component="name" src="source" lazy />

member import

The following table describes the properties that are used for introducing the export of ES6 module names.

Parameter Type Default value Remarks
component string Required The multiple naming identifiers to be imported to options.components. Enclose the identifiers in braces {,}. Otherwise, the identifiers are identified as default import.
src string Required The source of the component. The value of this property is the same as the result of the require (src) method.
lazy boolean false Specifies whether to enable lazy loading for the component. If lazy loading is enabled, a module of the component is loaded only when Vue requires this module. Modules are loaded by using require.

The following code shows an example:

 
  1. <dependency component="{ List, ListItem, AButton }" src="@alipay/antui-vue" lazy />

By default, on-demand babel-plugin-import loading is supported for the @alipay/antui-vue component library.

template

The template content structure is consistent with that of Vue.

 
  1. <template>
  2. <div>Hello World</div>
  3. </template>

style

 
  1. <style lang="less" rel="stylesheet/less">
  2. /* less */
  3. </style>

You can add the property tag scoped, so that the style takes effect only for the current component.

 
  1. <style lang="less" rel="stylesheet/less" scoped>
  2. /* less */
  3. </style>

Status injection

We recommend that you use the following connect mechanisms to pass through $store data:

  1. API declaration
  2. Use one of the following methods to pass through data:

If you need to use the properties of Store in Kylin components, we recommend that you do not use calculation properties to pass through the properties of the $store object. We recommend that you use the following method:

 
  1. @Component
  2. class Hello {
  3. // Associate the status in the store by using calculation properties.
  4. get hello() {
  5. return this.$store.state.hello
  6. }
  7. }

API declaration

 
  1. @Component({
  2. mapStateToProps: Object|Array,
  3. mapActionsToMethods: Object|Array,
  4. mapMethods: Array|Boolean,
  5. mapEvents: Array
  6. })
  7. class Hello {
  8. }

mapStateToProps

This function is used to map specific key values in state to those in the props property of the current component. This function accepts parameter in the same way as the auxiliary function mapState that is provided by Veux.

You can use one of the following methods to implement this feature:

Function-based method

The following code maps the data named bbb in $store.state to the props property of aaa.

 
  1. {
  2. mapStateToProps: {
  3. aaa: (state, getters) => state.bbb
  4. }
  5. }

String key-value pair-based method

The following code maps the data named bbb in $store.state to the props property of aaa.

 
  1. {
  2. mapStateToProps: {
  3. aaa: 'bbb'
  4. }
  5. }

String array-based method

The code below performs the following operation:

  • Map the data named aaa in $store.state to the props property of aaa.

  • Map the data named bbb in $store.state to the props property of bbb.

 
  1. {
  2. mapStateToProps: ['aaa', 'bbb']
  3. }

mapActionsToMethods

Similar to the input parameters of the mapActions function in Vuex, this function allows you to inject the actions property in the global $state object into the methods of the current component. You can complete the injection based on the name mapping of objects or based on the names of arrays.

 
  1. @Component({
  2. mapActionsToMethods: ['a', 'b']
  3. })
  4. class IndexView {
  5. async doSomeAction() {
  6. const ret = await this.a(123);
  7. // Equivalent to a call.
  8. // const ret = await this.$store.dispatch('a', 123);
  9. }
  10. }

mapMethods

Implement the connect mechanism by adding a middle layer component between a parent component and a child component. When the parent component calls a specific method in the child component, the parent component connects to the middle layer component instead of the child component. Use the following configurations to implement the required access:

 
  1. @Component({
  2. mapMethods: true
  3. })
  4. export default class Child {
  5. a() {}
  6. }
 
  1. <template>
  2. <div>
  3. this is parent
  4. <child ref="child"></child>
  5. </div>
  6. </template>
  7. <script>
  8. @Component
  9. export default class Parent {
  10. b() {
  11. // Access is enabled here.
  12. this.$refs.child.a();
  13. }
  14. }
  15. </script>