vue实现组件通信
Vue 组件通信方法
Vue 提供了多种方式实现组件间的通信，适用于不同场景。以下是常见的方法：
Props 和 Events
父组件通过 props 向子组件传递数据，子组件通过 $emit 触发事件通知父组件。
父组件模板：
<template>
<ChildComponent :message="parentMessage" @update="handleUpdate" />
</template>子组件模板：
<template>
<button @click="$emit('update', newValue)">Update</button>
</template>
<script>
export default {
props: ['message']
}
</script>$refs
通过 ref 属性获取子组件实例，直接调用其方法或访问数据。
父组件：
<template>
<ChildComponent ref="child" />
</template>
<script>
export default {
methods: {
callChildMethod() {
this.$refs.child.childMethod();
}
}
}
</script>Event Bus
创建一个中央事件总线，用于任意组件间的通信。
创建 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 => {
// 处理数据
});Vuex 状态管理
对于复杂应用，使用 Vuex 集中管理状态。
store 定义：
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default 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']
}$attrs 和 $listeners
传递未被识别为 props 的属性和事件。
父组件：
<ChildComponent v-bind="$attrs" v-on="$listeners" />slot 插槽
通过插槽内容进行通信。
父组件：
<ChildComponent>
<template v-slot:default="slotProps">
{{ slotProps.user.name }}
</template>
</ChildComponent>子组件：
<template>
<div>
<slot :user="user"></slot>
</div>
</template>每种方法适用于不同场景，简单父子通信使用 props/events，跨层级通信使用 provide/inject 或 Vuex，全局事件使用 Event Bus，复杂状态管理使用 Vuex。
