vue组件通信：使用$emit和$on进行自定义事件通信
在Vue应用中，组件通信是非常重要的一部分。通过组件通信，我们可以在不同的组件之间传递数据、触发事件等。Vue框架提供了多种方式进行组件通信，其中一种常用的方式是使用$emit和$on进行自定义事件通信。
在Vue中，每个组件都可以通过$emit方法来触发一个自定义事件，并将数据传递给其他组件。其他组件可以通过$on来监听这个自定义事件，并在事件触发时执行相应的逻辑。
我们来看一个简单的示例，假设我们有两个组件：一个是父组件Parent，一个是子组件Child。我们希望在子组件的按钮点击时，通知父组件进行相应的处理。
首先，我们需要在子组件中定义一个按钮，当按钮被点击时触发一个自定义事件：
立即学习“前端免费学习笔记（深入）”；
在上述代码中，子组件定义了一个按钮，并在按钮的点击事件中通过this.$emit来触发一个名为'customEvent'的自定义事件，并传递了一个包含数据的对象{ data: 'hello' }。
然后，在父组件中，我们需要监听这个自定义事件，并在事件触发时执行相应的逻辑。我们可以在父组件的生命周期钩子函数created中使用this.$on来监听这个自定义事件：
{{ message }}
在上述代码中，父组件首先引入了子组件ChildComponent，并在模板中使用
现在，我们已经完成了子组件和父组件之间的通信。当子组件的按钮被点击时，会触发'customEvent'自定义事件，并通过this.$emit将数据传递给父组件。父组件接收到数据后，会在message变量中保存并在模板中显示出来。
除了使用this.$on来监听自定义事件，我们还可以使用this.$once来监听自定义事件，这样在事件被触发一次后，监听就会自动移除。此外，Vue还提供了this.$off方法来手动移除监听器。
总结：
通过$emit和$on进行自定义事件通信是Vue中一种常用的组件通信方式。我们可以在发送组件中通过this.$emit来触发自定义事件并传递数据，然后在接收组件中通过this.$on来监听这个自定义事件，并在事件触发时执行相应的逻辑。这种方式可以帮助我们实现组件之间的灵活通信，提高了代码的复用性和可维护性。
以上就是使用$emit和$on进行自定义事件通信的示例代码和说明。希望可以帮助你更好地理解和应用Vue组件通信。
