示例代码
先看下伪代码的示例：
class component {
constructor(config) {
this.prop1=1
this.state = {
level: 1
}
}
get prop1() {
return this.prop1
}
set prop1(val) {
return this.prop1 = val
}
clickHandle() {
this.state.level = 2
}
event() {
target.addEventListener(type, listener, options);
}
created() {
console.log('created Lifecycle')
},
updated() {
console.log('updated Lifecycle')
}
}
<component data-attr="2">
<img src="children.png">
</component>
上述伪代码有写到组件的 8 个概念，分别是：
- Properties
- Attribute
- Methods
- Config
- State
- Event
- Children
- Lifecycle
概念介绍
Attribute VS Properties
Attribute: 标记语言的属性，强调描述性。
Properties：强调从属关系
Attribute:
<my-component attribute=“v” />
Property:
myComponent.a = “value”;
config
传入组件的配置项
state
组件的状态值
Methods
组件内部的方法
Event
组件监听的相关事件
Children
传入标签中包含的其他dom
LifeCycle
组件的生命周期，一般有创建、更新、销毁...
