Vue2（15） 自定义事件学习笔记

Vue2 自定义事件学习笔记

一、引言

在Vue2中，自定义事件是组件间通信的一种重要方式。通过自定义事件，子组件可以向父组件发送消息，从而实现数据的流动和组件的交互。本文将基于Vue2官方文档，详细阐述Vue2中自定义事件的定义、使用及其相关特性，并提供示例代码。

二、自定义事件的定义与触发

1. 事件名的命名规范

   • 不同于组件和prop，事件名不存在自动化的大小写转换。因此，触发的事件名需要完全匹配监听这个事件所用的名称。
   • 官方推荐始终使用kebab-case（短横线命名法）的事件名，因为v-on事件监听器在DOM模板中会被自动转换为全小写，导致camelCase（驼峰命名法）的事件名无法被正确监听。

2. 事件的触发

   • 在子组件中，可以使用this.$emit('eventName', ...args)来触发自定义事件，其中eventName为事件名，...args为传递给父组件的数据。

   示例代码：

   <!-- 子组件 ChildComponent.vue -->
   <template>
     <button @click="sendMessage">发送消息给父组件</button>
   </template>
   
   <script>
   export default {
          
     methods: {
          
       sendMessage() {
          
         const message = '这是来自子组件的消息';
         this.$emit('custom-event', message);
       }
     }
   }
   </