emit作用

emit 是 Vue 3 中用于子组件向父组件传递事件和数据的机制。它允许子组件触发一个自定义事件，父组件可以监听这个事件并执行相应的逻辑。

---

emit 的作用

1. 子组件向父组件通信：
   • 子组件通过 emit 触发一个自定义事件，父组件监听这个事件并执行相应的逻辑。
2. 传递数据：
   • 子组件可以通过 emit 向父组件传递数据，父组件可以在事件处理函数中接收这些数据。
3. 解耦组件逻辑：
   • 子组件不需要知道父组件的具体实现，只需要触发事件，父组件负责处理逻辑。

---

示例

以下是一个简单的例子，展示如何使用 emit：

1. 子组件（ChildComponent.vue）

2. 父组件（ParentComponent.vue）

3. 运行效果

• 当用户点击子组件的按钮时，子组件会触发 custom-event 事件，并传递一个对象 { message: 'Hello from ChildComponent!' }。
• 父组件监听 custom-event 事件，接收到数据后更新 message，并在页面上显示。

---

父组件监听事件

在父组件中，可以通过 @ 监听子组件触发的事件：

---

总结

• emit 用于子组件向父组件传递事件和数据。
• 通过 defineEmits 定义事件，emit 触发事件并传递数据。
• 父组件通过 @ 监听事件，并执行相应的逻辑。