专业网站优化服务,公司网站的后台,女主网站和男主做,百度代做seo排名目录 组件介绍
组件声明结构
组件接口
script
dependency
template
style
状态注入
接口声明 组件介绍
Component 扩充自 Vue 的组件, 提供了 Vue 组件对等的输入参数能力。在代码书写时提供类 class 的装饰器 Decorator 风格。
import { Component, Watch } from al…目录 组件介绍
组件声明结构
组件接口
script
dependency
template
style
状态注入
接口声明 组件介绍
Component 扩充自 Vue 的组件, 提供了 Vue 组件对等的输入参数能力。在代码书写时提供类 class 的装饰器 Decorator 风格。
import { Component, Watch } from ali/kylin-framework;
一个组件可以包含数据、JSX 渲染函数、模板、挂载元素、方法、生命周期等 Vue 的 options 选项的对等配置。
组件声明结构
组件声明包括以下几部分, 分别使用 Component 和 Watch 两种不同装饰器进行包装
class 类声明, 使用装饰器 Component。类成员声明, 不使用装饰器。类成员方法声明, 一般不装饰器, 除非该方法需要 watch 另外一个已声明的变量。
举例子
!-- Hello.vue --
templatedivhello {{name}}Child/Child/div
/template
style/* put style here */
/style
component defaultChild src./child.vue /
scriptimport { Component } from ali/kylin-framework;Componentclass Hello {data {name: world}}export default Hello;
/script
组件接口
跟 vue 基本一致组件定义写在 .vue 文件内以下是一个简单的例子:
templatedivAButton clickonClick点击/AButton/div
/template
style langless relstylesheet/less/* less */
/style
dependency component{ AButton } srcalipay/antui-vue lazy/
script typetext/javascriptimport { Component } from ali/kylin-framework;Componentexport default class IndexView {props {}data {c:666}get comput() { return this.data.c * 2 }onClick() {}mounted() {}}
/script
上述例子中有template、style、script、dependency 4 个顶级标签
其中 template、 style 与 vue 中定义一致。下文将对这 4 个标签的具体作用分别进行阐述。
script
1.class 结构
定义一个 Component 使用类 class 的装饰器 Decorator 风格。
其中装饰器有 Component 和 Watch 2 种通过以下方式引入。
import { Component, Watch } from ali/kylin-framework;
Component
export default class Hello {
}
2.方法类型
Component
组件以 class 形式声明必须对该 class 进行装饰器修饰。
在 class 内部不需要被手动处理成员变量babel 插件在构建过程中自动进行处理。
而 成员函数 一般不需要装饰器挂载除非是使用 Watch 的场景,其中 Component 会处理的属性如下表所示。
成员类型名称功能get/set property*用以转换成 Vue 的 computed 计算属性可以直接通过 this[varName] 调用。method生命周期生命周期方法与 Vue 对等。method*普通成员方法, 用以转换成 Vue 的 methods 方法列表。
分别举例
getter/setter属性
Component
export default class Hello {get computName() {// to sth}
}
上述 getter 声明等价于如下 vue 配置
HelloOption {computed: {computName: {get: computName() {// to sth}}}
}
同理setter 也会被提取如果同时存在 getter 和 setter 则会被一起提取。
生命周期函数
Component
export default class Hello {created() {}mounted() {}
}
上述 created 和 mounted 生命周期函数会被提取为数组。
TestOption {created: [function created(){}],mounted: [function mounted(){}],
}
支持的生命周期方法名如下beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、 beforeDestroy、destroyed。
Watch
该装饰器的出现只是因为 watch 需要有以下几个要素
被监听的变量名监听选项触发函数
用法
完整的 Watch 接口如下表所示。
function Watch( key: string [, option: Object {} ] ): PropertyDecorator
参数名类型用途keystring监听的参数名来自 computed、data、props三者之一。optiondeepboolean若监听的是复杂对象其内层数据变更是否触发默认为 false。immediateboolean立即以表达式的当前值触发回调默认为 false
示例
对于 Watch 装饰的成员函数支持对成员函数配置多个变量的监听如下同时对 a 和 c 的变化进行了监听如果任何一个发生变化会触发 OnChangeA 成员方法。如下OnChangeA 本质是成员方法所以他也会和其他成员方法一起被提取到methods块中那么必须保证没有与其他方法重名。如果对Watch有额外配置项请按 Watch(a, {deep: false})的方法传入。配置项请参考 watch配置项。
Component
class WTest {data {a: {b: 2},c: 3}Watch(c)Watch(a, {deep: true}) OnChangeA(newVal, oldVal) {}
}
注意: 以上对 data.a 的监听会转换成如下形式需要注意的是如果没开启 deep: true 选项当 data.a.b 发生变动的时候不会触发该 OnChangeA 监听。
3.属性类型
构建工具会自动对成员变量应用了 Component.Property 装饰器不需要用户手动填写
最终的合并策略取决于被装饰的 成员变量 的标识符名称框架内置了以下几种。如果不在下表中会透传至 VueComponent 的 options 对象中。
成员类型名称功能propertypropsvue的props属性propertydatavue的data属性会被转换成函数形式, 支持 this请勿直接写 data(){} 函数property*其他未知属性直接复制到 Vue 的 options 中的对应属性上
props
Component
export default class Hello {props {name: {type: String,default: haha},num: Number}
}
上述 props 成员变量定义会被直接转换成到 options 中对应的 props。具体完整定义结构请参见 Vue 文档 API-props。
HelloOption {props: {name: {type: String,default: haha},num: Number}
}
data
Component
export default class Hello {props {name: {type: Number,default: 1},}data {hello: this.props.name 2}
}
上述 data 成员变量定义会被转换成 data 函数形式您无需手动编写 data 函数。
TestOption {props: {name: {type: Number,default: 1}, },data: function data() {return {hello: this.props.name 2}}
}
dependency
上述 script 定义中没有说明组件依赖的使用方式在 .vue 文件中推荐使用以下写法来标记组件依赖即 dependency 标签下面示例中即引用了 ./child.vue 组件。
templatechild/child
/template
dependency componentChild src./child.vue /
标签属性
default 导入
针对 ES6 Module 的 default 导出或者 commonjs Module 对象的导出可使用如下方式引入。
属性类型默认值备注componentstring必填引入到 options.components 的标识符名。srcstring必填组件来源同require(src)。lazybooleanfalse是否对该组件启用懒加载当且仅当被 Vue 使用到时再进行 require 加载模块。stylestringundefined默认不启用如果设置了字符串会根据 ${src}/${style} 的路径来加载组件对应样式文件。
如下示例:
dependency componentname srcsource lazy / member 导入
针对 ES6 Module 的命名导出可使用如下方式引入
属性类型默认值备注componentstring必填引入到 options.components 的多个命名标识符, 必须以花括号 {} 包括否则会识别为 default 引入。srcstring必填组件来源同 require(src)。lazybooleanfalse是否对该组组件启用懒加载当且仅当被 Vue 使用到时再进行 require 加载模块。
如下示例:
dependency component{ List, ListItem, AButton } srcalipay/antui-vue lazy /
默认对 alipay/antui-vue 组件库支持 babel-plugin-import 按需加载。
template
模板的内容结构与 vue 一致。
templatedivHello World/div
/template
style
可以通过添加 scoped 属性标记来使得该样式只对当前组件生效。
style langless relstylesheet/less scoped/* less */
/style
状态注入
对于 Kylin 组件 如果需要使用到 Store 中的属性使用计算属性把 $store 对象中的属性透传出来是一种不推荐的写法如下所示
Component
class Hello {// 通过计算属性来关联store中的状态get hello() {return this.$store.state.hello}
}
推荐使用下面的 connect 机制来透传 $store 数据
mapStateToPropsmapActionsToMethodsmapMethods
接口声明
Component({mapStateToProps: Object|Array,mapActionsToMethods: Object|Array,mapMethods: Array|Boolean,mapEvents: Array
})
class Hello {
}
mapStateToProps
把 state 中的特定键值映射到当前组件的 props 中其接收参数等价于 Vuex 提供的 mapState 辅助函数。
有以下 3 种方式可实现上述功能
函数方式
说明把 $store.state 中名为 bbb 的数据映射到名为 aaa 的 props 上。
{mapStateToProps: {aaa: (state, getters) state.bbb}
}
字符串键值对方式
说明把 $store.state 中名为 bbb 的数据映射到名为 aaa 的 props 上。
{mapStateToProps: {aaa: bbb}
}
字符串数组方式
说明
把 $store.state 中名为 aaa 的数据映射到名为 aaa 的 props 上。把 $store.state 中的名为 bbb 的数据映射到名为 bbb 的props 上。
{mapStateToProps: [aaa, bbb]
}
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);}
}
mapMethods
通过在父子组件之间加一层中间层组件的方式来具体实现 connect 机制。当父组件调用子组件中特定的 method 方法时无法直接访问子组件实际访问到的是中间层组件需要通过以下配置实现访问。
Component({mapMethods: true
})
export default class Child {a() {}
}
templatedivthis is parentchild refchild/child/div
/template
scriptComponentexport default class Parent {b() {// 此处可以访问this.$refs.child.a();}}
/script 吐槽学这个麒麟框架真的像中了佐二助大招雷遁麒麟一样难受(╯﹏╰)
