From 4e9c8bf515fbabacf47d529788b40e5a2692b908 Mon Sep 17 00:00:00 2001
From: hdx <hdx@dcloud.io>
Date: Sat, 7 Oct 2023 16:07:20 +0800
Subject: [PATCH] =?UTF-8?q?feat($callMethod):=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=E8=AF=B4=E6=98=8E=E5=92=8C=E7=A4=BA=E4=BE=8B?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/uni-app-x/tutorial/codegap.md | 88 ++++++++++++++++++++++++++++++
 1 file changed, 88 insertions(+)

diff --git a/docs/uni-app-x/tutorial/codegap.md b/docs/uni-app-x/tutorial/codegap.md
index 1a58c0b79..ee38ebaf3 100644
--- a/docs/uni-app-x/tutorial/codegap.md
+++ b/docs/uni-app-x/tutorial/codegap.md
@@ -272,3 +272,91 @@ request({url: 'https://www.example.com/request'} as RequestOptions)
 ## css使用注意
 
 [详见](uni-app-x/css/README.md)
+
+## 如何调用组件方法
+
+使用 `this.$refs` 获取组件实例，通过 `$callMethod` 调用组件方法
+
+`$callMethod` 支持多个参数
+
+页面示例代码 `page1.uvue`
+
+```html
+<template>
+  <view>
+    <component1 ref="component1"></component1>
+  </view>
+</template>
+
+<script>
+  // 导入 vue 组件实例类型
+  import { ComponentPublicInstance } from 'vue'
+
+  // 引用组件 component1.uvue, 如果使用 easycom 可省略此步骤
+  import component1 from './component1.uvue'
+
+  export default {
+    components: {
+      component1
+    },
+    data() {
+      return {
+      }
+    },
+    onReady() {
+      // 获取组件 ref 属性 component1
+      const component1 = this.$refs['component1']! as ComponentPublicInstance;
+
+      // 通过 $callMethod 调用组件的 foo1 方法
+      component1.$callMethod('foo1');
+
+      // 通过 $callMethod 调用组件的 foo2 方法并传递 1个参数
+      component1.$callMethod('foo2', Date.now());
+
+      // 通过 $callMethod 调用组件的 foo3 方法并传递 2个参数
+      component1.$callMethod('foo3', Date.now(), Date.now());
+
+      // 通过 $callMethod 调用组件的 foo4 方法并传递 callback
+      component1.$callMethod('foo4', () => {
+        console.log('callback')
+      });
+
+      // 通过 $callMethod 调用组件的 foo5 方法并接收返回值
+      // 注意： 返回值可能为 null，当前例子一定不为空，所以加了 !
+      const result = component1.$callMethod('foo5', 'string1')! as string;
+      console.log(result); // string1
+    }
+  }
+</script>
+```
+
+组件示例代码 `component1.uvue`
+
+```html
+<template>
+  <view></view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+      }
+    },
+    methods: {
+      foo1() {
+      },
+      foo2(date1 : number) {
+      },
+      foo3(date1 : number, date2 : number) {
+      },
+      foo4(callback : (() => void)) {
+        callback()
+      },
+      foo5(text1 : string) : any | null {
+        return text1
+      }
+    }
+  }
+</script>
+```
-- 
GitLab