组件通信概述

在Vue中，组件通信是指不同组件之间如何传递数据、触发事件以及共享状态的过程。Vue的组件通信可以分为以下几种方式：

1. 父子组件通信：父组件向子组件传递数据或触发事件。

2. 子父组件通信：子组件向父组件传递数据或触发事件。

3. 兄弟组件通信：没有直接父子关系的组件之间通信。

4. 跨级组件通信：不在同一层级的组件之间通信。

5. 使用全局状态管理：使用Vuex或Vue 3的Composition API中的provide和inject来管理全局状态。

父子组件通信

父组件向子组件传递数据是通过属性(props)实现的。子组件接收这些属性并在其模板中使用它们。

<template><div><child-component :message="parentMessage" /></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {data() {return {parentMessage: 'Hello from Parent!'};},components: {ChildComponent}
}
</script>

子组件的代码：

<template><div><p>{{ message }}</p></div>
</template><script>
export default {props: ['message']
}
</script>

子父组件通信

子组件向父组件传递数据通常通过触发自定义事件来实现。父组件监听这些事件并在事件处理程序中处理数据。

<!-- ChildComponent.vue -->
<template><button @click="sendMessage">Send Message to Parent</button>
</template><script>
export default {methods: {sendMessage() {this.$emit('message-to-parent', 'Hello from Child!');}}
}
</script>

<!-- ParentComponent.vue -->
<template><div><child-component @message-to-parent="handleMessageFromChild" /></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {methods: {handleMessageFromChild(message) {console.log(message); // 输出 "Hello from Child!"}},components: {ChildComponent}
}
</script>

兄弟组件通信

兄弟组件之间的通信通常需要一个共享的父组件或使用Vue的事件总线。

// 创建事件总线
const eventBus = new Vue();// 在第一个组件中触发事件
eventBus.$emit('custom-event', data);// 在第二个组件中监听事件
eventBus.$on('custom-event', eventData => {// 处理事件数据
});

跨级组件通信

跨级组件通信可以通过provide和inject来实现。provide允许父组件提供数据，而inject允许子孙组件注入这些数据。

// ParentComponent.vue
<template><div><grandparent-component :message="message" /></div>
</template><script>
import GrandparentComponent from './GrandparentComponent.vue';export default {data() {return {message: 'Hello from Parent!'};},components: {GrandparentComponent}
}
</script>

// GrandparentComponent.vue
<template><div><parent-component /></div>
</template><script>
import ParentComponent from './ParentComponent.vue';export default {provide: {message: this.message},components: {ParentComponent}
}
</script>

// ParentComponent.vue
<template><div><child-component /></div>
</template><script>
import { inject } from 'vue';export default {setup() {const message = inject('message');return { message };}
}
</script>