编辑“︁Vue.js组件通信”︁（章节）

= Vue.js组件通信 =

'''Vue.js组件通信'''是指Vue.js应用程序中不同组件之间传递数据或触发行为的方式。由于Vue.js采用组件化架构，组件之间的通信是构建复杂应用的核心概念。本文将详细介绍Vue.js中组件通信的多种方法，包括父子组件通信、兄弟组件通信以及跨层级组件通信。

== 介绍 ==

在Vue.js中，组件是独立的、可复用的代码单元，每个组件都有自己的作用域。因此，组件之间的数据流动需要通过特定的机制来实现。以下是Vue.js中常见的组件通信方式：

* '''Props'''：父组件向子组件传递数据。
* '''自定义事件'''：子组件向父组件发送消息。
* '''Event Bus'''：通过全局事件总线实现任意组件间的通信。
* '''Provide/Inject'''：跨层级组件通信。
* '''Vuex/Pinia'''：状态管理库，适用于大型应用的状态共享。

== Props：父组件向子组件传递数据 ==

Props是Vue.js中最基础的组件通信方式，允许父组件向子组件传递数据。子组件通过`props`选项声明接收的数据。

=== 基本语法 ===

<syntaxhighlight lang="javascript">
// 子组件：ChildComponent.vue
export default {
  props: ['message'],
  template: `<div>{{ message }}</div>`
}
</syntaxhighlight>

<syntaxhighlight lang="javascript">
// 父组件：ParentComponent.vue
<template>
  <ChildComponent message="Hello from Parent!" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent }
}
</script>
</syntaxhighlight>

=== 输出 ===
子组件会显示：  
<code><div>Hello from Parent!</div></code>

=== 注意事项 ===
* Props是单向数据流，子组件不能直接修改父组件传递的数据。
* 可以通过`.sync`修饰符或`v-model`实现双向绑定（Vue 2.x）。

== 自定义事件：子组件向父组件通信 ==

子组件可以通过`$emit`触发自定义事件，父组件通过`v-on`监听这些事件。

=== 示例 ===
<syntaxhighlight lang="javascript">
// 子组件：ChildComponent.vue
<template>
  <button @click="notifyParent">Click Me</button>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      this.$emit('child-event', 'Data from child');
    }
  }
}
</script>
</syntaxhighlight>

<syntaxhighlight lang="javascript">
// 父组件：ParentComponent.vue
<template>
  <ChildComponent @child-event="handleChildEvent" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

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

== Event Bus：全局事件总线 ==

Event Bus是一种利用Vue实例作为中央事件总线的方式，适用于非父子组件通信。

=== 实现步骤 ===
1. 创建一个全局Vue实例作为事件总线：
<syntaxhighlight lang="javascript">
// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();
</syntaxhighlight>

2. 在发送组件中触发事件：
<syntaxhighlight lang="javascript">
// ComponentA.vue
import { EventBus } from './event-bus.js';

EventBus.$emit('custom-event', 'Some data');
</syntaxhighlight>

3. 在接收组件中监听事件：
<syntaxhighlight lang="javascript">
// ComponentB.vue
import { EventBus } from './event-bus.js';

EventBus.$on('custom-event', (data) => {
  console.log(data); // 输出: "Some data"
});
</syntaxhighlight>

== Provide/Inject：跨层级通信 ==

`provide`和`inject`允许祖先组件向其所有子孙组件注入依赖，适用于深层嵌套组件。

=== 示例 ===
<syntaxhighlight lang="javascript">
// 祖先组件：Ancestor.vue
<template>
  <ChildComponent />
</template>

<script>
export default {
  provide: {
    sharedData: 'Data from ancestor'
  }
}
</script>
</syntaxhighlight>

<syntaxhighlight lang="javascript">
// 子孙组件：Descendant.vue
<template>
  <div>{{ sharedData }}</div>
</template>

<script>
export default {
  inject: ['sharedData']
}
</script>
</syntaxhighlight>

=== 输出 ===
子孙组件显示：  
<code><div>Data from ancestor</div></code>

== Vuex/Pinia：状态管理 ==

对于大型应用，推荐使用状态管理库（如Vuex或Pinia）集中管理共享状态。

=== Vuex示例 ===
<syntaxhighlight lang="javascript">
// 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++;
    }
  }
});
</syntaxhighlight>

<syntaxhighlight lang="javascript">
// 组件中使用
this.$store.commit('increment');
console.log(this.$store.state.count); // 输出: 1
</syntaxhighlight>

== 实际应用场景 ==

以下是一个购物车系统的组件通信示例：

<mermaid>
graph TD
    A[App] -->|props| B[ProductList]
    B -->|$emit| A
    A -->|provide| C[Cart]
    C -->|inject| D[CartItem]
</mermaid>

1. `ProductList`通过props接收商品数据。
2. 用户点击“加入购物车”时，`ProductList`通过`$emit`通知`App`。
3. `App`通过`provide`将购物车数据共享给`Cart`和`CartItem`组件。

== 总结 ==

Vue.js组件通信方式多样，选择合适的方法取决于组件关系和项目规模：

* 父子组件：Props + 自定义事件
* 兄弟组件：Event Bus 或 状态管理
* 跨层级组件：Provide/Inject
* 大型应用：Vuex/Pinia

掌握这些通信方式能帮助开发者构建更灵活、可维护的Vue.js应用。

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Vue.js组件基础]]