2023-03-30,

Vue 的组件通信方式有以下几种：

父子组件通信：父组件通过 props 向子组件传递数据，子组件通过 $emit 触发事件向父组件传递数据。

子父组件通信：子组件通过 $emit 触发事件向父组件传递数据，父组件通过 v-on 监听子组件事件并处理数据。

兄弟组件通信：可以通过一个共同的父组件作为中介，将数据通过 props 和事件分别传递给两个兄弟组件。

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

事件总线：可以通过创建一个空的 Vue 实例作为事件总线，用于在任意组件之间传递事件和数据。

Vuex：Vuex 是 Vue 的状态管理库，可以用于管理全局状态和实现组件之间的通信。

需要根据具体的场景和需求选择合适的通信方式。

父子组件通信：

父组件：

<template> <div> <child-component :message="message" @update-message="updateMessage"></child-component> </div></template><script>import ChildComponent from './ChildComponent.vue';export default { components: { ChildComponent }, data() { return { message: 'Hello World' } }, methods: { updateMessage(newMessage) { this.message = newMessage; } }}</script>

子组件：

<template> <div> <p>{{ message }}</p> <button @click="updateMessage">Update Message</button> </div></template><script>export default { props: { message: String }, methods: { updateMessage() { this.$emit('update-message', 'New Message'); } }}</script>

子父组件通信：

父组件：

<template> <div> <child-component @update-message="updateMessage"></child-component> <p>{{ message }}</p> </div></template><script>import ChildComponent from './ChildComponent.vue';export default { components: { ChildComponent }, data() { return { message: '' } }, methods: { updateMessage(newMessage) { this.message = newMessage; } }}</script>

子组件：

<template> <div> <button @click="updateMessage">Update Message</button> </div></template><script>export default { methods: { updateMessage() { this.$emit('update-message', 'New Message'); } }}</script>

兄弟组件通信：

父组件：

<template> <div> <child-component-1 :message="message" @update-message="updateMessage"></child-component-1> <child-component-2 :message="message"></child-component-2> </div></template><script>import ChildComponent1 from './ChildComponent1.vue';import ChildComponent2 from './ChildComponent2.vue';export default { components: { ChildComponent1, ChildComponent2 }, data() { return { message: 'Hello World' } }, methods: { updateMessage(newMessage) { this.message = newMessage; } }}</script>

子组件1：

<template> <div> <p>{{ message }}</p> <button @click="updateMessage">Update Message</button> </div></template><script>export default { props: { message: String }, methods: { updateMessage() { this.$emit('update-message', 'New Message'); } }}</script>

子组件2：

<template> <div> <p>{{ message }}</p> </div></template><script>export default { props: { message: String }}</script>

跨级组件通信：

父组件：

<template> <div> <child-component></child-component> </div></template><script>import ChildComponent from './ChildComponent.vue';export default { components: { ChildComponent }, provide() { return { message: 'Hello World' } }}</script>

子组件：

<template> <div> <grandchild-component></grandchild-component> </div></template><script>import GrandchildComponent from './GrandchildComponent.vue';export default { components: { GrandchildComponent }}</script>

孙子组件：

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

事件总线：

<template> <div> <button @click="updateMessage">Update Message</button> </div></template><script>export default { methods: { updateMessage() { EventBus.$emit('update-message', 'New Message'); } }}const EventBus = new Vue();</script>

Vuex：

Vuex 是 Vue 的状态管理库，可以用于管理全局状态和实现组件之间的通信。

以下是一个简单的示例：

<template> <div> <p>{{ message }}</p> <button @click="updateMessage">Update Message</button> </div></template><script>import { mapState, mapMutations } from 'Vuex';export default { computed: { ...mapState(['message']) }, methods: { ...mapMutations(['updateMessage']) }}</script> <template> <div> <p>{{ message }}</p> </div></template><script>import { mapState } from 'vuex';export default { computed: { ...mapState(['message']) }}</script> import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({ state: { message: 'Hello World' }, mutations: { updateMessage(state, newMessage) { state.message = newMessage; } }});

在这个示例中，我们使用了 Vuex 来管理全局状态。在父组件和子组件中都使用了 mapState 来获取 message 状态，使用 mapMutations 来触发 updateMessage mutation 来更新 message 状态。在 Vuex 的 store 中定义了 message 状态和 updateMessage mutation 来更新 message 状态。

PS:本文来源：用ChatGPT高效学习-Vue的组件通信方式有哪些？,chatGPT,Vuex,组件,人工智能,作者：小饭