From 50844e5b7165bf8fbb4361005444332718bde847 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=9C=E5=BA=86=E6=B3=89?= <duqingquan@dcloud.io>
Date: Wed, 13 Dec 2023 15:55:49 +0800
Subject: [PATCH] Update uts-component.md

---
 docs/plugin/uts-component.md | 113 ++++++++++++++++++++++++++++++-----
 1 file changed, 98 insertions(+), 15 deletions(-)

diff --git a/docs/plugin/uts-component.md b/docs/plugin/uts-component.md
index 4fe982ac5..d08a9797d 100644
--- a/docs/plugin/uts-component.md
+++ b/docs/plugin/uts-component.md
@@ -599,41 +599,63 @@ NVUpdateStyles(styles: Map<String, any>){
 > Android
 
 ```html
+
 <template>
-	<view>
+	<view >
 
 	</view>
 </template>
 <script lang="uts">
-
 	import TextUtils from 'android.text.TextUtils'
 	import Button from 'android.widget.Button'
 	import LinearLayout from 'android.widget.LinearLayout'
-	import Color from 'android.graphics.Color'
 	import View from 'android.view.View'
 
 	class ButtonClickListsner extends View.OnClickListener {
 		constructor() {
-
+			super()
 		}
 		override onClick(v ? : View) {
 			console.log(v)
 		}
 	}
 
-	//原生提供以下属性或方法的实现
+	//原生提供以下属性或方法的实现  
 	export default {
+		/**
+		 * 组件名称，也就是开发者使用的标签
+		 */
 		name: "uts-hello-view",
+		/**
+		 * 组件涉及的事件声明，只有声明过的事件，才能被正常发送
+		 */
+		emits: ['buttonClick'],
+		/**
+		 * 属性声明，组件的使用者会传递这些属性值到组件
+		 */
 		props: {
+			/**
+			 * 字符串类型 属性：buttonText  需要设置默认值
+			 */
 			"buttonText": {
 				type: String,
 				default: "点击触发"
 			}
 		},
-
+		/**
+		 * 组件内部变量声明
+		 */
+		data() {
+			return {}
+		},
+		/**
+		 * 属性变化监听器实现
+		 */
 		watch: {
 			"buttonText": {
-
+				/**
+				 * 这里监听属性变化，并进行组件内部更新
+				 */
 				handler(newButtonText: string) {
 					if (this.$el != null) {
 						let button = this.$el!.findViewWithTag("centerButton") as Button
@@ -641,25 +663,69 @@ NVUpdateStyles(styles: Map<String, any>){
 							button.setText(newButtonText)
 						}
 					}
-				}
+				},
+				immediate: false //创建时是否通过此方法更新属性，默认值为false  
 			},
 		},
+		/**
+		 * 规则：如果没有配置expose，则methods中的方法均对外暴露，如果配置了expose，则以expose的配置为准向外暴露
+		 * ['publicMethod'] 含义为：只有 `publicMethod` 在实例上可用
+		 */
+		expose: ['doSth'],
+		methods: {
+			/**
+			 * 对外公开的组件方法
+			 */
+			doSth(paramA: string) {
+				// 这是组件的自定义方法
+				console.log("paramA",paramA)
+			},
+			/**
+			 * 内部使用的组件方法
+			 */
+			privateMethod() {
+
+			}
+		},
+
+		/**
+		 * 组件被创建，组件第一个生命周期，
+		 * 在内存中被占用的时候被调用，开发者可以在这里执行一些需要提前执行的初始化逻辑
+		 * [可选实现]
+		 */
+		created() {
 
+		},
+		/**
+		 * 对应平台的view载体即将被创建，对应前端beforeMount  
+		 * [可选实现]
+		 */
+		NVBeforeLoad() {
+
+		},
+		/**
+		 * 创建原生View，必须定义返回值类型
+		 * 开发者需要重点实现这个函数，声明原生组件被创建出来的过程，以及最终生成的原生组件类型
+		 * （Android需要明确知道View类型，需特殊校验） 
+		 * todo 补充IOS平台限制
+	  * [必须实现]
+		 */
 		NVLoad(): LinearLayout {
-			//必须实现
+			//必须实现  
 			let contentLayout = new LinearLayout(this.$androidContext)
 			let button = new Button(this.$androidContext)
+			button.setText("点击触发");
 			button.setTag("centerButton");
 			contentLayout.addView(button, new LinearLayout.LayoutParams(500, 500));
 			button.setOnClickListener(new ButtonClickListsner())
 			return contentLayout
-		},
-
+		}
 
+		
 	}
 </script>
 <style>
-
+	
 </style>
 
 ```
@@ -752,17 +818,34 @@ NVUpdateStyles(styles: Map<String, any>){
 
 直接使用`uts-hello-view`标签，并且定义`buttonText`文本内容即可看到效果。
 
-点击按钮，可以在控制台看到组件内部实现的日志输出
+点击组件内置按钮，可以在控制台看到组件内部实现的日志输出
+点击`调用组件的方法`按钮，可以看到组件内置方法被调用
+
 
 ```html
 <template>
 	<div>
-		<text>UTS view组件</text>
-		<uts-hello-view buttonText="点击按钮内容" style="width:375px;height: 375px;background-color: aqua;"></uts-hello-view>
+		<uts-hello-view ref="helloView" buttonText="点击按钮内容" style="width:375px;height: 375px;background-color: aqua;"></uts-hello-view>
+    	<button @tap="callComponentMethod">调用组件的方法</button>
 	</div>
+	
 </template>
 
 <script>
+  export default {
+      data() {
+          return {
+              
+          }
+      },
+      methods: {
+		  // 调用组件内的方法
+          callComponentMethod: function() {
+              this.$refs["helloView"].doSth("param doSth");
+          },
+      }
+      
+  }
 </script>
 
 <style>
-- 
GitLab