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 状态。
星球：玩转ChatGPT与AI绘画
马上超过20人，欢迎加入，免费送gpt独立账号。
