From 3005136c52e53178b583a0843ea14149633f0c49 Mon Sep 17 00:00:00 2001
From: bojiang <jiangbo91@huawei.com>
Date: Fri, 29 Jul 2022 11:09:11 +0800
Subject: [PATCH] jiangbo91@huawei.com

add component chain type file

Signed-off-by: bojiang <jiangbo91@huawei.com>
Change-Id: I1335423c5655dca68d497f7d7214cbfe8ec29ac1
---
 .../ui/ui-ts-component-chaining.md            | 45 +++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 zh-cn/application-dev/ui/ui-ts-component-chaining.md

diff --git a/zh-cn/application-dev/ui/ui-ts-component-chaining.md b/zh-cn/application-dev/ui/ui-ts-component-chaining.md
new file mode 100644
index 0000000000..6cf9aa3081
--- /dev/null
+++ b/zh-cn/application-dev/ui/ui-ts-component-chaining.md
@@ -0,0 +1,45 @@
+# 自定义组件链式调用
+
+> **说明：**该写法从API version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 
+
+@Component组件链式调用可以实现同一组件不同样式显示的效果。
+
+> **说明：**在自定义组件使用链式写法时不能使用尾随闭包（ 在初始化自定义组件时，组件名称紧跟一个大括号“{}”形成尾随闭包场景（Index(){}`）。开发者可把尾随闭包看做一个容器，向其填充内容，如在闭包内增加组件（`{Column(){Text("content")}` ）。
+
+```
+@Entry
+@Component
+struct Index {
+@State bannerValue: string = 'Hello,world';
+build() {
+  Column() {
+    Chind1({ChindBannerValue:$bannerValue})
+    .height(60)
+    .width(250)
+    .border({width:5, color:0x317AF7, radius:10, style: BorderStyle.Dotted})
+    Chind2({ChindBannerValue:$bannerValue});
+  }
+} 
+}
+
+@Component
+struct Chind1{
+  @Link ChindBannerValue: string;
+  build() {
+    Column() {
+      Text(this.ChindBannerValue)
+      .fontSize(30)
+    }
+  }
+}
+
+@Component
+struct Chind2{
+  @Link ChindBannerValue: string;
+  build() {
+    Text(this.ChindBannerValue)
+    .fontSize(30)
+  }
+}
+```
+
-- 
GitLab