1. vue中使用emit

在 Vue.js 中使用 emit 进行父子组件间的通信是一个常见且实用的模式。以下是详细的步骤说明和示例代码，展示如何在实际开发中应用 emit。

1.1. 在子组件中触发事件

首先，你需要在子组件内部决定何时触发一个事件向父组件传递信息。这通常在响应用户操作（如点击按钮）时发生。使用 this.$emit 方法来触发事件，并可以传递参数给父组件。

1.1.1. 子组件示例 (ChildComponent.vue)

1.2. 在父组件中监听事件

接下来，在使用子组件的父组件中，你需要使用 v-on 或简写的 @ 来监听子组件发出的事件。同时，定义一个方法来处理这个事件，该方法将接收子组件传递的参数。

1.2.1. 父组件示例 (ParentComponent.vue)

在这个例子中，当用户点击子组件中的按钮时，会触发 sendMessage 方法，进而触发 'messageSent' 事件，将字符串 '你好，父组件！' 传递给父组件。父组件通过监听这个事件并执行 handleMessageFromChild 方法来接收这个信息，并将其显示在

标签中。

这就是 Vue.js 中使用 emit 进行父子组件通信的基本流程。这种方法保持了组件之间的解耦，使得每个组件只关注自己的职责。

更多详细内容，请微信搜索“前端爱好者“， 戳我 查看 。

vue3中使用emit

在 Vue 3 中，使用 emit 进行父子组件通信的实践与 Vue 2 有所不同，主要是因为 Vue 3 引入了Composition API。以下是在 Vue 3 中使用 emit 的方法：

1.3. 使用 setup 函数和 defineEmits

Vue 3 中推荐使用 setup 函数来定义组件的逻辑，以及使用 defineEmits 来明确声明要发射的事件。

1.3.1. 子组件示例 (ChildComponent.vue)

在上面的代码中，我们使用 defineEmits 来预先定义了 update:selected 事件。然后在 handleClick 方法中通过 emit 函数触发此事件，并传递了一个参数 '新值'。

1.3.2. 父组件示例 (ParentComponent.vue)

在父组件中，我们监听了从子组件发出的 update:selected 事件，并定义了 handleUpdateSelected 方法来处理这个事件，更新本地的状态 selected。

1.4. 总结

Vue 3 中，通过在子组件的 setup 函数中使用 defineEmits 明确定义要发出的事件，以及在父组件中使用模板语法监听这些事件，实现了更清晰和类型安全的父子组件通信。这种方式鼓励开发者提前规划组件间通信的接口，提高了代码的可维护性和可读性。