Vue组件事件

在 Vue 中，组件之间通过 **事件（Events）** 进行通信。Vue 提供了两种主要的事件机制：

---

## 一、父子组件之间的事件传递

### 1. 父组件向子组件传递数据（props）

- 使用 `props` 向子组件传递数据。
- 子组件通过 `props` 接收。

```vue

<template>
  <ChildComponent :message="parentMessage" />
</template>

export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  }
};
</script>
```

```vue

<template>
  <p>{{ message }}</p>
</template>

---

### 2. 子组件向父组件发送事件（$emit）

- 子组件使用 `$emit` 触发自定义事件。
- 父组件监听该事件并执行相应逻辑。

```vue

<template>
  <button @click="sendEvent">点击我</button>
</template>

```vue

<template>
  <ChildComponent @child-event="handleChildEvent" />
</template>

export default {
  components: { ChildComponent },
  methods: {
    handleChildEvent(data) {
      console.log(data); // 输出: Hello from child
    }
  }
};
</script>
```

---

## 二、非父子组件之间的通信

### 1. 使用 Event Bus（事件总线）

适用于任意组件间通信，但不推荐用于大型项目，因为难以维护。

#### 创建一个 event bus：

```js
// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();
```

#### 在组件中使用：

```vue

<script>
import { EventBus } from './event-bus.js';

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message', 'Hello from A');
    }
  }
};
</script>
```

```vue

<script>
import { EventBus } from './event-bus.js';

export default {
  created() {
    EventBus.$on('message', (msg) => {
      console.log(msg); // 输出: Hello from A
    });
  }
};
</script>
```

> ⚠️ 注意：使用完后最好用 `EventBus.$off()` 取消监听，避免内存泄漏。

---

### 2. 使用 Vuex（状态管理）

适用于复杂应用中多个组件共享状态或事件。

- 使用 `store.dispatch()` 发送事件。
- 使用 `store.commit()` 修改状态。

#### 示例：

```js
// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  }
});
```

```vue

<template>
  <button @click="increment">增加</button>
</template>

export default {
  methods: {
    ...mapActions(['increment'])
  }
};
</script>
```

```vue

<template>
  <p>当前计数：{{ count }}</p>
</template>

export default {
  computed: {
    ...mapState(['count'])
  }
};
</script>
```

---

## 三、自定义事件命名规范

- 使用 **kebab-case** 命名（如：`child-event`），这样在 HTML 模板中更自然。
- 或者使用 **camelCase**（如：`childEvent`），在 JavaScript 中使用。

---

## 四、总结

| 通信方式       | 适用场景             | 优点                   | 缺点                   |
|----------------|----------------------|------------------------|------------------------|
| Props + $emit  | 父子组件             | 简单直观               | 不适合多级嵌套         |
| Event Bus      | 非父子组件           | 灵活，简单             | 难以维护，容易混乱     |
| Vuex           | 复杂应用，多组件共享 | 状态集中管理，易于维护 | 需要学习成本           |

---

如果你有具体的使用场景（比如如何在组件之间传递数据或触发事件），可以告诉我，我可以给出更详细的示例。