知识篇：（十三）Vue 自定义事件详解：绑定、解绑与事件触发，轻松搞定父子组件通信！

Vue 自定义事件详解：绑定、解绑与事件触发，轻松搞定父子组件通信！

Vue 自定义事件，是不是一听就感觉有点高深？放心，没那么可怕！今天我就用轻松、幽默的方式，带你玩转 Vue 自定义事件的绑定、解绑和触发，一起看看组件之间是怎么用事件打电话的！

---

1. 自定义事件是什么？Vue 的 “小喇叭”！

Vue 的自定义事件其实就是组件间的小喇叭！你可以想象，子组件有话要对父组件说，但它不会直接喊“爸爸听我说！”，而是用 $emit 触发个自定义事件，相当于喊了一嗓子：“爸爸，我有事说！”。而父组件只要监听这嗓子（通过 v-on 或 $on），就能立刻接收到消息。多么温馨的场景，vue一家子其乐融融！

自定义事件最常见的场景就是子组件向父组件发送信息，但其实，你也可以用它来干很多别的事情，比如给其他兄弟姐妹组件发消息、处理某些全局事件等等。它灵活得很，不怕你用不到，只怕你没想到。

2. 目录结构大揭秘

要学 Vue 的自定义事件，先把项目结构安排好。我们先来看看这一家子是如何生活在同一屋檐下的！

my-vue-app/
├── src/
│   ├── components/
│   │   ├── ParentComponent.vue  # 父组件，负责听
│   │   └── ChildComponent.vue   # 子组件，负责说
│   ├── App.vue                  # 主入口文件，负责领路
│   └── main.js                  # Vue 入口配置，负责起头
├── public/
├── package.json                 # 项目配置
└── README.md                    # 大纲说明

OK，接下来我们来看看这家人是怎么用自定义事件传话的。

---

3. 自定义事件绑定与触发

3.1 子组件：使用 $emit 大喊一声！

在 ChildComponent.vue 中，子组件负责“发话”，通过 $emit 方法触发自定义事件：

<!-- ChildComponent.vue -->
<template>
  <div>
    <button @click="sendMessage">给爸爸发消息</button>
  </div>
</template>

<script>
export default {
   
  methods: {
   
    sendMessage() {
   
      // $emit 就是我们发话的小喇叭！这里触发了 'message' 事件
      this.$em