组件

当前框架是基于tsx和proxy的响应式框架

Data

组件内部Data,可以直接通过类属性定义, 组件内部可以响应式监听Data

---

Computed

computed属性可以直接通过get和set挂载计算属性

---

Watch

以通过@watch修饰符添加监听属性

@watch("checkBoxChecked")
  handleCheck(newVal, oldVal){
    console.log(`newVal: ${newVal}, oldVal: ${oldVal}`);
  }

@watch方法中传递的是监听的值,在组建初始化时,根据装饰器收集当前组件所有的watch属性,然后在父类Control的构造函数中初始化所有watch

---

组件属性

Model

model分为输入控件的自动model,以及自定义组件定义的model

model可以的在组件/控件响应式的变更传入的值

输入控件的自动model

组件通过model关键词对组件进行双向绑定(目前支持的有input,radio,checkbox)

<input model="inputValue">

自定义组件的model

通过model\ value参数传递到props.value属性,如果使用model则内部值内部变化后, 组件外部会自动变化, 如果使用value则在组件内部发生变化无法继续向组件外部传递

<CheckBoxGroup model="checkBoxChecked" >
    <Checkbox label="true选项"></Checkbox>
    <Checkbox label="false选项"></Checkbox>
    <Checkbox label="disable选项"></Checkbox>
</CheckBoxGroup>

ref

Control实例中存在readonly $refs参数，可用于存储当前组件内部的组件实例。

<Menu ref={this.addRefs("menu")} defaultActive="1-1" onSelect={this.handleSelect}>
  <SubMenu index="1" title="导航一">
    <MenuItem index="1-1"><i className="iconfont icon-loading"></i> 我的工作台</MenuItem>
  </SubMenu>
  <SubMenu index="2" title="导航二">
    <MenuItem index="1-3" disabled>消息中心</MenuItem>
  </SubMenu>
</Menu>

目前ref中固定语法为{this.addRefs("xxx")},xxx表示通过this.$refs.xxx来获取组件实例,并且可以调用组件中定义的属性以及方法

组件定义

定义组件通过主动继承Control并且添加了@Component类修饰符的类来实现

@Component
class Button extends Control {
    ...
}

子组件定义参数

每个组件都继承自Control，Control接受一个类型，作为props的类型

interface IButtonProps extends IBaseComponent  {
  disabled?: boolean,
  loading?: boolean
}
@Component
class Button extends Control<IButtonProps> {
}

这样在使用Button组件时，会自动提示定义的IButtonProps中的属性

<Button onClick={this.handleClick} disabled={this.buttonDisable}>this is a button</Button>

组件通讯

父组件通过attribute向子组件传值，子组件通过this.props.xxx访问父组件传进来的值, 当父组件传递的值发生变化时, 子组件会响应式的更新

组件的数据传递是单向的，除了model参数之外，其余参数在子组件内部发生变化，不会响应式更新到父组件，也不会响应式更新子组件内容

<Button onClick={this.emitDone} type="success">{this.buttonTitle}</Button>

attribute基于tsx的形式,可以向子组件传递变量

生命周期

componentWillCreate

实例初始化后被调用

componentCreated

实例创建完成后被调用

componentWillMount

组件挂载前事件

componentMounted

组件挂载后的事件

componentWillDestory

组件销毁前事件

componentDestoryed

组件销毁后事件

componentWillUpdate

组件更新前将被调用

componentUpdated

组件更新后调用