使用vue实例实现通信
Vue 实例通信方法
在 Vue 中，组件间的通信可以通过多种方式实现。以下是几种常见的方法：
1. Props 和 Events 父组件通过 props 向子组件传递数据，子组件通过 $emit 触发事件向父组件传递数据。
父组件模板：
<child-component :message="parentMessage" @update="handleUpdate"></child-component>子组件脚本：
props: ['message'],
methods: {
sendData() {
this.$emit('update', newData);
}
}2. Event Bus 创建一个全局事件总线，用于跨组件通信。
创建 Event Bus：
export const EventBus = new Vue();组件 A 发送事件：
EventBus.$emit('event-name', data);组件 B 接收事件：
EventBus.$on('event-name', (data) => {
// 处理数据
});3. Vuex 状态管理 对于大型应用，使用 Vuex 进行集中式状态管理。
store.js：
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
}
}
});组件中使用：
this.$store.commit('increment');4. Provide/Inject 祖先组件通过 provide 提供数据，后代组件通过 inject 注入数据。
祖先组件：
provide() {
return {
sharedData: this.data
};
}后代组件：
inject: ['sharedData']5. $refs 通过 ref 属性直接访问子组件实例。
父组件：
<child-component ref="child"></child-component>访问子组件：
this.$refs.child.methodName();6. $parent 和 $children 通过 $parent 访问父组件实例，通过 $children 访问子组件实例。
访问父组件方法：
this.$parent.parentMethod();7. 本地存储 使用 localStorage 或 sessionStorage 进行数据共享。
存储数据：
localStorage.setItem('key', 'value');读取数据：
localStorage.getItem('key');根据应用规模和组件关系，选择最适合的通信方式。小型应用可以使用 props/events 或 Event Bus，大型应用建议使用 Vuex。
