vue3组合式API实现父组件触发子组件中的方法 | vue3中ref的用法 | defineExpose的使用场景

vue3组合式API实现父组件触发子组件中的方法 | vue3中ref的用法 | defineExpose的使用场景

一、问题背景

代码环境：vue3 （组合式API setup）+ vite

碰到的问题：代码为父组件中的一个按钮，触发一个填写表单的Dialog弹出框，在填写信息发送请求添加一条信息后，再次点击触发按钮，发现封装Dialog的子组件中，表单中的值没有没有重置。

解决思路：在点击父组件中的触发按钮时，触发子组件中的重置方法，对表单项进行重置。

二、解决方法

在 Vue 3 的组合式 API 中，您可以使用 ref 和 value 来获取子组件实例，并调用子组件中的方法。

官网详解：

网址：组件上的ref

三、示例

1. 在父组件中，您需要为子组件添加一个 ref：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

2. 在子组件中，您需要在 setup 函数中定义一个需要调用的方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

注：使用了