!7378 add component chain type file

Merge pull request !7378 from Bo Jiang/addFile

zh-cn/application-dev/ui/ts-component-based-component.md

@@ -4,11 +4,9 @@
 
 
 - 可组合：允许开发人员组合使用内置组件、其他组件、公共属性和方法；
-
+- 链式调用<sup>9+</sup>：通过链式调用通用属性改变组件样式；
 - 可重用：自定义组件可以被其他组件重用，并作为不同的实例在不同的父组件或容器中使用；
-
 - 生命周期：生命周期的回调方法可以在组件中配置，用于业务逻辑处理；
-
 - 数据驱动更新：由状态变量的数据驱动，实现UI自动更新。
 
 
@@ -18,8 +16,7 @@
 >  **说明：**
 >
 >  - 自定义组件必须定义build方法。
->
->  - 自定义组件禁止自定义构造函数。
+>- 自定义组件禁止自定义构造函数。 
 
 
 如下代码定义了MyComponent组件：
@@ -88,3 +85,37 @@ struct ParentComponent {
     }
 }
 ```
+
+可链式调用通用属性，使组件样式多样化：
+
+> **说明：** 从API version 9开始支持。
+>
+> 自定义组件链式调用暂不支持尾随闭包写法（在初始化自定义组件时，组件名称紧跟一个大括号“{}”形成尾随闭包场景`(Inedx(){})`。开发者可把尾随闭包看做一个容器，向其填充内容，如在闭包内增加组件`{Column(){Text("content")}` ）。
+
+```ts
+@Entry
+@Component
+struct Index {
+  @State bannerValue: string = 'Hello,world';
+  build() {
+    Column() {
+      Chind({ ChindBannerValue:$bannerValue })
+      .height(60)
+      .width(250)
+      .border({ width:5, color:Color.Red, radius:10, style: BorderStyle.Dotted })
+    }
+  }
+}
+
+@Component
+struct Chind {
+  @Link ChindBannerValue: string;
+  build() {
+    Column() {
+      Text(this.ChindBannerValue)
+      .fontSize(30)
+    }
+  }
+}
+```
+