Vue自定义事件

### Vue.js 自定义事件使用指南 在 Vue.js 中，自定义事件是一种强大的机制，用于组件之间的通信。通过 `v-on` 指令绑定事件监听器，并通过 `$emit` 方法触发事件，可以实现父子组件、兄弟组件甚至非父子关系的组件之间的交互[^1]。 以下是一个完整的示例，展示如何在 Vue.js 中使用自定义事件： #### 父子组件间的自定义事件 ```html <!-- 父组件 --> <div id="app"> <child-component @custom-event="handleCustomEvent"></child-component> </div> <script> // 子组件 Vue.component('child-component', { template: `<button @click="sendEvent">触发事件</button>`, methods: { sendEvent() { this.$emit('custom-event', '这是从子组件传递的数据'); } } }); new Vue({ el: '#app', methods: { handleCustomEvent(data) { console.log('自定义事件被触发，接收到的数据:', data); } } }); </script> ``` 在这个例子中，子组件通过 `$emit` 方法触发名为 `custom-event` 的自定义事件，并将数据传递给父组件。父组件通过 `@custom-event` 绑定监听器并处理该事件。 #### 使用事件总线（Event Bus）进行组件间通信 当需要在非父子关系的组件之间通信时，可以使用事件总线[^2]。以下是具体实现： ```javascript // eventBus.js import Vue from 'vue'; const eventBus = new Vue(); export default eventBus; ``` ```html <!-- 组件 A --> <script> import eventBus from './eventBus'; export default { methods: { sendDataToB() { eventBus.$emit('message-from-a', '这是来自组件 A 的消息'); } } }; </script> ``` ```html <!-- 组件 B --> <script> import eventBus from './eventBus'; export default { created() { eventBus.$on('message-from-a', (message) => { console.log('接收到的消息:', message); }); } }; </script> ``` 在此示例中，组件 A 通过事件总线触发事件，而组件 B 监听该事件并接收数据。 #### 表单提交中的自定义事件与修饰符 在处理表单提交时，可以结合自定义事件和事件修饰符来简化逻辑[^3]。例如： ```html <form @submit.prevent="handleSubmit"> <input type="text" v-model="formData.name" /> <button type="submit">提交</button> </form> <script> export default { data() { return { formData: { name: '' } }; }, methods: { handleSubmit() { this.$emit('form-submitted', this.formData); } } }; </script> ``` 此代码片段展示了如何通过 `@submit.prevent` 阻止默认表单提交行为，并通过 `$emit` 触发自定义事件。 --- ###