【前端知识】Vue进阶-组件间通信

组件间通信

- - 一、父子组件通信
  - 二、兄弟组件或非直接父子组件通信
  - 三、跨层级组件通信
- 相关文献

Vue组件间通信是指在Vue应用程序中，不同的组件之间进行数据传递和交互的过程。以下是对Vue组件间通信的详细介绍及举例：

一、父子组件通信

父子组件通信是Vue中最常见的通信方式。

父组件向子组件通信
- 父组件通过props属性将数据传递给子组件。
- 子组件通过props选项接收来自父组件的数据。

例如：

<!-- 父组件 ParentComponent.vue -->
<template><div><ChildComponent :message="parentMessage" /></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},data() {return {parentMessage: 'Hello from parent'};}
};
</script><!-- 子组件 ChildComponent.vue -->
<template><div><p>{{ message }}</p></div>
</template><script>
export default {props: ['message']
};
</script>

在上面的例子中，父组件ParentComponent通过props将parentMessage数据传递给子组件ChildComponent，子组件通过props接收并显示该数据。

子组件向父组件通信
- 子组件通过$emit方法触发自定义事件，并将数据作为参数传递给父组件。
- 父组件通过监听子组件触发的事件来接收数据。

例如：

<!-- 父组件 ParentComponent.vue -->
<template><div><ChildComponent @childEvent="handleChildEvent" /></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},methods: {handleChildEvent(eventData) {console.log('Received from child:', eventData);}}
};
</script><!-- 子组件 ChildComponent.vue -->
<template><div><button @click="sendToParent">Send to Parent</button></div>
</template><script>
export default {methods: {sendToParent() {this.$emit('childEvent', 'Hello from child');}}
};
</script>

在上面的例子中，子组件ChildComponent通过$emit方法触发childEvent事件，并将'Hello from child'作为参数传递给父组件。父组件通过监听childEvent事件来接收并处理该数据。

二、兄弟组件或非直接父子组件通信

当组件之间没有直接的父子关系时，可以使用全局事件总线（EventBus）或Vuex进行通信。

全局事件总线（EventBus）
- 创建一个新的Vue实例作为事件总线。
- 兄弟组件通过事件总线进行数据的发送和接收。

例如：

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

<!-- 组件A ComponentA.vue -->
<script>
import { EventBus } from './event-bus.js';export default {methods: {sendData() {EventBus.$emit('dataSent', 'Hello from Component A');}}
};
</script><!-- 组件B ComponentB.vue -->
<script>
import { EventBus } from './event-bus.js';export default {created() {EventBus.$on('dataSent', this.handleData);},beforeDestroy() {EventBus.$off('dataSent', this.handleData);},methods: {handleData(data) {console.log('Received in Component B:', data);}}
};
</script>

在上面的例子中，组件A通过事件总线发送数据，组件B通过监听事件总线上的事件来接收数据。

Vuex
- Vuex是一个专为Vue.js应用程序开发的状态管理模式。
- 它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

使用Vuex进行兄弟组件通信时，需要先将状态存储在Vuex的store中，然后在需要通信的组件中通过this.$store.state或this.$store.getters访问状态，通过this.$store.commit提交mutation来修改状态。

三、跨层级组件通信

对于跨层级的组件通信，可以使用provide/inject选项或$parent/$children访问。

provide/inject
- 祖先组件通过provide选项提供数据。
- 后代组件通过inject选项接收数据。

例如：

<!-- 祖先组件 AncestorComponent.vue -->
<template><div><DescendantComponent /></div>
</template><script>
import DescendantComponent from './DescendantComponent.vue';export default {components: {DescendantComponent},provide() {return {sharedData: 'This is shared data'};}
};
</script><!-- 后代组件 DescendantComponent.vue -->
<template><div><p>{{ sharedData }}</p></div>
</template><script>
export default {inject: ['sharedData']
};
</script>

在上面的例子中，祖先组件AncestorComponent通过provide提供sharedData数据，后代组件DescendantComponent通过inject接收并显示该数据。