From b7dd88fdcf3edca13fb32895fd725e323e421bb7 Mon Sep 17 00:00:00 2001
From: yutent <yutent.io@gmail.com>
Date: Fri, 22 Sep 2023 15:39:24 +0800
Subject: [PATCH] Update Component

---
 Component.md | 131 ++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 130 insertions(+), 1 deletion(-)

diff --git a/Component.md b/Component.md
index 5d08b7b..c5ee8ca 100644
--- a/Component.md
+++ b/Component.md
@@ -1 +1,130 @@
-Welcome to the Wiki.
\ No newline at end of file
+# Component
+> 这是框架最核心的模块。内置了一套简洁的组件生成机制, 并提供了一系列的实用API。
+
+
+## 静态属性
+
+### 1. watches`<String>[]`
+> 用于声明一些需要监听的属性。正常来说, 会很少需要设置这个, 大多数情况下静态属性`props`中的`key`, 都会被监听。
+
+
+### 2. props`<Object>`
+> 用于声明节点的属性, 用于和外部进行数据通信。
+>> - type 属性的类型(`String, Number, Boolean, Array, Object`)五种之一
+>> - default  属性默认值。 前3种基础类型, 还可以设置默认值为`null`, 为null时, 节点上不会显示属性出来。
+>> - attribute  是否显式表现。该设置只对`String/Number`2种类型有效, `Boolean`类型, 遵循W3C规范,值为`true`时显示, `false`时不显示; 而复杂类型, 始终不会显示。
+>> - observer 监听的回调。该回调有2个参数, 分别为当前值和旧值, 有需要时, 在在回调中做一些额外的操作。
+
+一旦声明了类型, 框架内部即会对传入的值进行修正, 如果传入值的类型与声明的不一致, 会强制转换, 要转换失败则会替换为默认值。
+
+5种类型, 对应的默认值分别为 `'', 0, false, [], {}`。
+
+
+```js
+
+static props = {
+  foo: {
+    type: String,
+    default: '123',
+    attribute: false, // 默认为 true
+    observer(val, old) {
+      // todo...
+    }
+  }
+  
+  bar: {type: Boolean}, // 只写类型也可以, 等价于  {type: Boolean, default: false}
+  
+  goo: true, // 简写, 只写值也可以, 框架内部会将这个值作为默认值, 并用这个值得到类型, 最终等价于  {type: Boolean, default: true}
+  
+}
+
+```
+
+从上面的例子可以看出, 属性的声明, 非常灵活。
+
+##### 2.1 快速定义非显式属性
+> `v1.10.0` 之后, 对于`String`、`Number`、`Boolean`这3种简单类型, 可以快速的定义非显式属性。
+
+对应`3`种特殊的`prefix`字符, 即`str!`、`num!`、`bool!`, 叹号后面可以带上默认值,  框架会自动按类型转换, 其中布尔类型的默认值, 除`'false'`和`''`之外, 全部为`true`。
+
+```js
+
+class Foo extends Component {
+  static props = {
+    foo: 'str!',  // 等价于 foo: { type: String, default: '', attribute: false }
+    bar: 'num!666',  // 等价于 foo: { type: Number, default: 666, attribute: false }
+    goo: 'bool!false'  // 等价于 foo: { type: Boolean, default: false, attribute: false }
+  }
+}
+
+```
+
+### 3. styles`css[]`
+> 用于编写组件的内部样式的属性。可是一个包含`css实例`的**数组**, 也可以是**单个**`css实例`。
+
+
+```js
+
+static styles = css`
+  .foo { color: red }
+`
+
+
+static styles = [
+  css`
+    .foo { color: red }
+  `,
+  css`
+    .bar { color: blue }
+  `
+]
+
+
+// 注意, 这里如果用 scss 语法, 需要使用wkit配套的构建工具来编译
+static styles = css`
+  .foo { 
+    color: red 
+      
+    .bar {
+      color: blue
+    }
+  }
+`
+
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+