全部产品

组件接口

跟 vue 基本一致,组件定义写在 .vue 文件内,以下是一个简单的例子:

  1. <template>
  2. <div>
  3. <AButton @click="onClick">点击</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>

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

下面分别表述一下这 4 个标签的具体作用。其中 <template>, <style>vue 中定义一致。

script

class 结构

定义一个 Component ,在代码结构上,使用类 class 的装饰器 Decorator 风格。其中装饰器一共有 @Component, @Watch 2种,通过以下方式引入

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

方法类型

组件以 class 形式声明,必须对该 class 进行装饰器修饰。在 class 内部,成员变量是不需要被手动处理的,在构建过程中通过 babel 插件自动进行处理,而成员函数一般不需要装饰器挂载,除非是使用 @Watch 的场景,其中@Component会处理的属性如下表

成员类型 名称 功能
get/set property * 用以转换成Vuecomputed计算属性,可以直接通过this[varName]调用
method 生命周期 生命周期方法,与Vue对等
method * 普通成员方法, 用以转换成Vuemethods方法列表

getter/setter属性

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

上述 getter 声明,等价于如下 vue 配置

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

同理,setter 也会被提取,如果同时存在 gettersetter 则会被一起提取。

生命周期函数

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

上述 createdmounted 生命周期函数,会被提取为数组。

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

支持的生命周期方法名如下,beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed

Watch

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

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

完整的 @Watch 接口如下表

  1. function Watch( key: string [, option: Object = {} ] ): PropertyDecorator
参数名 类型 用途
key string 监听的参数名,来自computed, data, props三者之一
option
参数名类型
deepboolean
immediateboolean
使用deep表示如果监听的是复杂对象,其内层数据变更是否触发,默认false
使用immediate将立即以表达式的当前值触发回调,默认false
使用
  1. 对于 @Watch 装饰的成员函数,支持对成员函数配置多个变量的监听,如下同时对 ac 的变化进行了监听,如果任何一个发生变化,会触发 OnChangeA 成员方法。
  2. 如下,OnChangeA 本质是成员方法,所以他也会和其他成员方法一起被提取到methods块中,那么必须保证没有与其他方法重名。
  3. 如果对Watch有额外配置项,请按 @Watch('a', {deep: false})的方法传入。配置项请参考 watch配置项
  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. }

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

属性类型

构建工具会自动对成员变量应用了 @Component.Property 装饰器,不需要用户手动填写,最终的合并策略取决于被装饰的成员变量的标识符名称,框架内置了以下几种。如果不在下表中,会透传至 VueComponentoptions 对象中。

成员类型 名称 功能
property props vue的props属性
property data vue的data属性,会被转换成函数形式, 支持this,请勿直接写data(){}函数
property * 其他未知属性,直接复制到 Vueoptions 中的对应属性上

props

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

上述 props 成员变量定义,会被直接转换成到 options 中对应的 props

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

具体完整定义结构请参见 Vue 文档 API-props

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

上述 data 成员变量定义,会被转换成data函数形式,不需要自己写成一个函数。

  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

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

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

标签属性

default导入

针对于 ES6 Moduledefault 导出或者 commonjs,可使用如下方式引入。

属性 类型 默认值 备注
component string 必填 引入到options.components的标识符名
src string 必填 组件来源,同require(src)
lazy boolean false 是否对该组件启用懒加载(当且仅当被Vue使用到时再进行require加载模块)
style string undefined 默认不启用,如果设置了字符串,会根据${src}/${style}的路径来加载组件对应样式文件

如下示例:

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

member导入

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

属性 类型 默认值 备注
component string 必填 引入到options.components的多个命名标识符, 必须以花括号{,}包括,否则会识别为default引入
src string 必填 组件来源,同require(src)
lazy boolean false 是否对该组组件启用懒加载(当且仅当被Vue使用到时再进行require加载模块)

如下示例:

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

默认对以下组件库支持babel-plugin-import按需加载:

  • @alipay/antui-vue

template

模板的内容结构与 vue 一致。

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

style

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

其中,可以通过添加 scoped 属性标记来使得该样式只对当前组件生效。

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