vue实现组件通信
vue实现组件通信的方法
Vue 中组件通信有多种方式，适用于不同场景的需求。以下是常见的几种方法：
父子组件通信（Props / $emit）
父组件通过 props 向子组件传递数据，子组件通过 $emit 触发事件向父组件传递数据。
父组件模板：
<template>
<ChildComponent :message="parentMessage" @update="handleUpdate" />
</template>子组件模板：
<template>
<button @click="notifyParent">通知父组件</button>
</template>
<script>
export default {
props: ['message'],
methods: {
notifyParent() {
this.$emit('update', '新数据');
}
}
}
</script>事件总线（Event Bus）
创建一个全局事件总线，允许非父子组件通信。
创建事件总线：
// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();组件 A 发送事件：
EventBus.$emit('event-name', data);组件 B 接收事件：
EventBus.$on('event-name', (data) => {
console.log(data);
});Vuex 状态管理
适用于大型应用，集中管理组件共享的状态。
安装并配置 Vuex：
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: { count: 0 },
mutations: {
increment(state) {
state.count++;
}
}
});组件中使用：
this.$store.commit('increment');
console.log(this.$store.state.count);provide / inject
祖先组件通过 provide 提供数据，后代组件通过 inject 接收数据。
祖先组件：
export default {
provide() {
return { theme: 'dark' };
}
}后代组件：
export default {
inject: ['theme'],
created() {
console.log(this.theme); // 'dark'
}
}$attrs / $listeners
用于跨层级组件通信，传递未被 props 识别的属性和事件。
父组件：
<ChildComponent v-bind="$attrs" v-on="$listeners" />$parent / $children
直接访问父组件或子组件实例，但不推荐频繁使用，可能导致耦合。
this.$parent.someMethod();
this.$children[0].someData;插槽（Slots）
通过插槽传递模板内容，适用于父子组件内容分发。
父组件：
<ChildComponent>
<template v-slot:default>插槽内容</template>
</ChildComponent>子组件：
<template>
<slot></slot>
</template>每种方法适用于不同场景，选择合适的通信方式能提高代码的可维护性和可读性。
