kylinH5框架之项目组件理解
目录
组件介绍
组件声明结构
组件接口
script
dependency
template
style
状态注入
接口声明
组件介绍
Component 扩充自 Vue 的组件, 提供了 Vue 组件对等的输入参数能力。在代码书写时提供类 class 的装饰器 Decorator 风格。
import { Component, Watch } from '@ali/kylin-framework';
一个组件可以包含数据、JSX 渲染函数、模板、挂载元素、方法、生命周期等 Vue 的 options 选项的对等配置。
组件声明结构组件声明包括以下几部分, 分别使用 @Component 和 @Watch 两种不同装饰器进行包装：
class 类声明, 使用装饰器 @Component。类成员声明, 不使用装饰器。类成员方法声明, 一般不装饰器, 除非该方法需要 watch 另外一个已声明的变量。举例子
<template>
<div>
hello {{name}}
<Child></Child>
</div>
</template>
<style>
</style>
<component default="Child" src="./child.vue" />
<script>
import { Component } from '@ali/kylin-framework';
@Component
class Hello {
data = {
name: 'world'
}
}
export default Hello;
</script>
组件接口
跟 vue 基本一致，组件定义写在 .vue 文件内，以下是一个简单的例子:
<template>
<div>
<AButton @click="onClick">点击</AButton>
</div>
</template>
<style lang="less" rel="stylesheet/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 = {c:666}
get comput() { return this.data.c * 2 }
onClick() {}
mounted() {}
}
</script>
上述例子中，有<template>、<style>、<script>、<dependency> 4 个顶级标签
其中 <template>、 <style> 与 vue 中定义一致。下文将对这 4 个标签的具体作用分别进行阐述。
script1.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() {
}
}
上述 getter 声明，等价于如下 vue 配置
HelloOption = {
computed: {
computName: {
get: computName() {
}
}
}
}
同理，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 组件。
<template>
<child></child>
</template>
<dependency component="Child" src="./child.vue" />
标签属性
default 导入
针对 ES6 Module 的 default 导出或者 commonjs Module 对象的导出，可使用如下方式引入。
属性类型默认值备注componentstring必填引入到 options.components 的标识符名。srcstring必填组件来源，同require(src)。lazybooleanfalse是否对该组件启用懒加载（当且仅当被 Vue 使用到时再进行 require 加载模块）。stylestringundefined默认不启用，如果设置了字符串，会根据 ${src}/${style} 的路径来加载组件对应样式文件。如下示例:
<dependency component="name" src="source" lazy />
member 导入
针对 ES6 Module 的命名导出，可使用如下方式引入：
属性类型默认值备注componentstring必填引入到 options.components 的多个命名标识符, 必须以花括号 {，} 包括，否则会识别为 default 引入。srcstring必填组件来源，同 require(src)。lazybooleanfalse是否对该组组件启用懒加载（当且仅当被 Vue 使用到时再进行 require 加载模块）。如下示例:
<dependency component="{ List, ListItem, AButton }" src="@alipay/antui-vue" lazy />
默认对 @alipay/antui-vue 组件库支持 babel-plugin-import 按需加载。
template模板的内容结构与 vue 一致。
<template>
<div>Hello World</div>
</template>
style可以通过添加 scoped 属性标记来使得该样式只对当前组件生效。
<style lang="less" rel="stylesheet/less" scoped>
</style>
状态注入
对于 Kylin 组件， 如果需要使用到 Store 中的属性，使用计算属性把 $store 对象中的属性透传出来是一种不推荐的写法，如下所示：
@Component
class Hello {
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);
}
}
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>
吐槽：学这个麒麟框架真的像中了佐二助大招雷遁麒麟一样难受(╯﹏╰)
相关知识
Qt框架之情人节玫瑰花案例项目
一文看遍第45届世界技能大赛56个参赛项目！
鲜花花卉管理系统.zip
在ant设计中选择日期后，无法清除范围选取器
视频教程
Fairyproof 深度剖析GameFi安全审计的痛点
Google的60款开源项目
[开题报告]FLASK框架鲜花售卖网站的设计与实现p9wlm（源码+论文）
基于flask+vue框架的网上花店销售管理系统[开题+论文+程序]
2013.10
网址: kylinH5框架之项目组件理解 https://m.huajiangbk.com/newsview112912.html
| 上一篇: 花卉具体摆放位置 |
下一篇: 浅谈花卉在生活中应用.doc |
