vue3中子组件调用父组件事件

在 Vue 3 中，子组件调用父组件的事件（或方法）的方式与 Vue 2 类似，但 Vue 3 引入了 Composition API，这可能会改变你组织代码的方式。不过，基本的通信机制——通过自定义事件 ($emit) 通知父组件——仍然保持不变。

以下是如何在 Vue 3 中使用 Options API 和 Composition API 的示例：

使用 Options API

父组件 (ParentComponent.vue)

子组件 (ChildComponent.vue)

使用 Composition API

父组件 (ParentComponent.vue) (这里父组件使用 Options API 或 Composition API 都可以)

子组件 (ChildComponentWithComposition.vue)

在 Composition API 中，setup 函数接收两个参数：props 和 context。context 是一个对象，它包含了 attrs、slots 和 emit 等属性。你可以通过 context.emit 来触发事件，但更常见的做法是将 emit 直接从 setup 函数的参数中解构出来，如上面的示例所示。

在这两种情况下，子组件都通过 $emit 方法触发一个名为 child-event 的事件，并将一些数据作为有效负载传递给父组件。父组件监听这个事件，并在事件触发时调用相应的方法。