网站右下角广告展示代码seo教程网站优化

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);}}
   }
   </