mPaaS-技术干货 | Kylin 框架-组件

Posted 2021-11-05 枯木前头万木春

一、组件介绍

Component 扩充自 Vue 的组件, 提供了 Vue 组件对等的输入参数能力。在代码书写时提供类 class的装饰器Decorator 风格。

代码引入

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

二、组件声明结构

一个组件可以包含数据、JSX渲染函数、模板、挂载元素、方法、生命周期等 Vue 的options选项的对等配置。

组件声明包括以下几部分, 分别使用 @Component, @Watch 两种不同装饰器进行包装：

• class 类声明, 使用装饰器 @Component
• 类成员声明, 不使用装饰器
• 类成员方法声明, 一般不装饰器, 除非该方法需要 watch 另外一个已声明的变量

三、组件开发演示

(1).vue 单文件组件

<!-- Hello.vue -->
<template>
  <div>
    hello {{ name }}
    <Child></Child>
  </div>
</template>
<style>
/* put style here */
</style>
<component default="Child"src="./child.vue"/>
<script>
import { Component } from "@ali/kylin-framework";
@Component
class Hello {
  data = {
    name: "world",
  };
}
export default Hello;
</script>

(2)组件接口

• scriptclass结构方法类型 getter/setter属性生命周期函数Watch API使用属性类型 propsdata
• dependency 、标签属性： default导入、member导入
• template
• style

注：跟 vue 基本一致，组件定义写在 .vue 文件内

<template>
  <div>
    <AButton @click="onClick">点击</AButton>
  </div>
</template>
<style lang="less"rel="stylesheet/less">
/* less */
</style>
<dependency component="{ AButton }"src="@alipay/antui-vue"lazy/>
<script type="text/javascript">
import { Component } from "@ali/kylin-framework";
@Component
export default class IndexView {
  props = {};
  data = {};
  get comput() {
    return this.data.c * 2;
  }
  onClick() {}
  mounted() {}
}
</script>

上述例子中，有 4 个顶级标签，除了与 Vue 相同的<template>, <style>, <script>之外，还有一个<dependency>标签。

下面分别表述一下这 4 个标签的具体作用。

其中<template>, <style>与 vue 中定义一致。

(3)script class 结构

定义一个Component，在代码结构上，使用类 class 的装饰器 Decorator 风格。

其中装饰器一共有@Component,@Watch 2种，通过以下方式引入:

import { Component, Watch } from '@ali/kylin-framework';
@Component
export default class Hello {

}

(4)方法类型

组件以class形式声明，必须对该 class 进行装饰器修饰。在 class 内部，成员变量是不需要被手动处理的

在构建过程中通过babel插件自动进行处理，而成员函数一般不需要装饰器挂载

除非是使用 @Watch的场景,其中@Component会处理的属性如下表

1.getter/setter属性

@Component
export default class Hello {
	get computName() {
		// to sth
	}
}

2.生命周期函数

@Component
export default class Hello {
	created() {}
	mounted() {}
}

上述 created 和 mounted 生命周期函数，会被提取为数组。
如下：

TestOption = {
created: [function created(){}],
mounted: [function mounted(){}],
}

支持的生命周期方法名如下：

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

3.Watch

该装饰器的出现，只是因为watch需要有以下几个要素：

• 被监听的变量名
• 监听选项
• 触发函数

4.完整的 @Watch 接口如下表

@Component
class WTest {
	data = {
	a: {
	b: 2
	},
	c: 3
	}
	@Watch('c')
	@Watch('a', {deep: false})
	OnChangeA(newVal, oldVal) {
	}
}

注意: 以上对 data.a 的监听，会转换成如下形式，需要注意的是，如果没开启 deep: true选项，当 data.a.b发生变动的时候，不会触发该 OnChangeA 监听。

(5)属性类型

1.props

@Component
export default class Hello {
	props = {
	name: {
	type: String,
	default: 'haha'
	},
	num: Number
	}
}

2.data

@Component
export default class Hello {
	props = {
	name: {
	type: Number,
	default: 1
	},
	}
	data = {
	hello: this.props.name + 2
	}
}

3.dependency

上述 <script> 定义中，没有说明组件依赖的使用方式，在 .vue 文件中，推荐使用以下写法来标记组件依赖，即<dependency> 标签，下面示例中即引用了./child.vue 组件。

<template>
<child></child>
</template>

引入child组件

<dependency component="Child"src="./child.vue"/>

4.标签属性

(1)default导入:

针对于 ES6Module的 default 导出或者 commonjs，可使用如下方式引入。

示例：

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

(2)member导入

针对 ES6 Module的命名导出，可使用如下方式引入：

示例：

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

默认对以下组件库支持babel-plugin-import

按需加载:@alipay/antui-vue

(3)template

模板的内容结构与 vue 一致

<template>
<div>Hello World</div>
</template>

(4)style

<style lang="less"rel="stylesheet/less"scoped>
/* less */
</style>

(6)状态注入

对于 Kylin 组件， 如果需要使用到 Store 中的属性，使用计算属性把 $store对象中的属性透传出来是一种不推荐的写法，如下所示：

Component
class Hello {
	// 通过计算属性来关联store中的状态
	get hello() {
	return this.$store.state.hello
	}
}

推荐使用下面的 connect机制来透传 $store 数据：

1。mapStateToProps

把state中的特定键值映射到当前组件的props中，其接收参数等价于 Vuex 提供额 mapState辅助函数。
有如下几种姿势:

函数：

把$store.state中的名为bbb的数据，映射到名为aaa的props上

{
mapStateToProps: {
	aaa: (state, getters) => state.bbb
	}
},

字符串键值对

偷懒写法1把$store.state中的名为bbb的数据，映射到名为aaa的props上

{
	mapStateToProps: {
	aaa: 'bbb'
	}
}

2.mapActionsToMethods

与Vuex中mapActions入参一致，支持对象方式（名称映射），数组方式（名称）把全局$store下的配置了的actions注入到当前组件的methods中

@Component({
	mapActionsToMethods: ['a', 'b']
	})
	class IndexView {
	async doSomeAction() {
	const ret = await this.a(123);
	// 等价于调用
	// const ret = await this.$store.dispatch('a', 123);
	}
}

3.mapMethods

在connect的实现中，具体是通过在父子组件之间添加一层中间层组件实现的，因此，父组件调用子组件（实际上调用到的是中间层）的特定method方法时，是无法访问到的。

可以通过以下配置访问。

@Component({
	mapMethods: true
})
export default class Child {
	a() {}
}

<template>
<div>
	this is parent
	<child ref="child"></child>
	</div>
</template>
<script>
@Component
export default class Parent {
	b() {
		// 此处可以访问
		this.$refs.child.a();
	}
}
</script>