Vue3 子组件与父组件数据传递及方法调用详解

在 Vue3 中，可以通过 props 和 $emit 来实现子组件向父组件传递数据，父组件向子组件传递数据，子组件调用父组件的方法，父组件调用子组件的方法。

'子传父'（子组件向父组件传递数据）：

1. 在子组件中通过 props 定义需要传递给父组件的数据。
2. 在子组件中通过 $emit 触发一个自定义事件，并传递需要传递的数据。

'父传子'（父组件向子组件传递数据）：

1. 在父组件中通过 props 定义需要传递给子组件的数据。
2. 在父组件的模板中使用子组件，并通过 v-bind 将父组件的数据传递给子组件。

'子调父'（子组件调用父组件的方法）：

1. 在父组件中定义一个方法。
2. 在子组件中通过 $emit 触发一个自定义事件，并通过事件参数调用父组件的方法。

'父调子'（父组件调用子组件的方法）：

1. 在子组件中使用 ref 获取到子组件的实例。
2. 在父组件中通过 ref 获取到子组件的实例，并调用子组件的方法。

注意：在 Vue3 中，可以使用 ref 和 setup 函数来实现子组件调用父组件的方法和父组件调用子组件的方法。