在Vue中，组件之间的通信可以有多种方式实现：

1. Props 和 $emit

   • Props：父组件向子组件传递数据时，通过属性绑定（v-bind 或 :）将数据作为属性传给子组件。子组件需要在props选项中声明它接收的属性列表。
   • **emit∗∗：子组件向父组件发送事件和数据，通过‘emit**：子组件向父组件发送事件和数据，通过 `emit∗∗：子组件向父组件发送事件和数据，通过‘emit(eventName, payload)触发自定义事件，并附带数据。父组件可以在使用子组件的地方监听这个事件，通常通过v-on: eventName或@eventName` 来实现。

2. refs

   • refs：直接访问子组件实例或DOM元素。当需要获取子组件的状态或者调用其方法时，可以给子组件添加一个ref引用，在父组件中通过‘this.refs**：直接访问子组件实例或DOM元素。当需要获取子组件的状态或者调用其方法时，可以给子组件添加一个ref引用，在父组件中通过 `this.refs∗∗：直接访问子组件实例或DOM元素。当需要获取子组件的状态或者调用其方法时，可以给子组件添加一个ref引用，在父组件中通过‘this.refs.refName` 访问该子组件实例。

3. Event Bus (全局事件总线)

   • 创建一个独立的 Vue 实例作为事件中心，通过它的 $on 和 $emit 方法来在任何组件之间发送和接收事件，以此实现跨级或兄弟组件间的通信。

4. Vuex

   • Vuex 是 Vue 提供的状态管理库，用于管理整个应用层级的状态，允许组件间共享状态并通过 actions、mutations 进行状态的变更和同步。

5. 依赖注入（provide / inject）

   • 父组件可以通过 provide 选项提供数据，而无需显式传递 props，然后在子孙组件中通过 inject 选项来注入并使用这些数据。

6. 父子组件通信补充方式

   • 使用回调函数作为 Prop，父组件传递一个方法给子组件，子组件在适当的时候调用此方法以更新父组件的状态。
   • 使用 v-model 进行双向数据绑定（仅限于表单输入类组件或其他支持 v-model 的自定义组件）。

7. 动态组件与 keep-alive 缓存

   • 动态组件配合 keep-alive 可以在切换组件时保留状态，并且可以通过激活/停用状态的改变进行间接通信。

Props 和 $emit 父组件

父组件

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

 子组件

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

 refs

父组件

<template><div><child-component ref="childRef"></child-component><button @click="callChildMethod">Call Child Method</button></div>
</template><script>
import ChildComponent from './ChildComponent.vue'export default {components: { ChildComponent },methods: {callChildMethod() {this.$refs.childRef.childMethod();}}
}

  子组件

<script>
export default {methods: {childMethod() {console.log('Child method called');}}
}
</script>

 Event Bus

 

// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();// 在任意组件内发送事件
EventBus.$emit('customEvent', payload);// 在任意组件内接收事件
EventBus.$on('customEvent', (payload) => {console.log(payload);
});

Vuex 

import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({state: {sharedData: 'Global State'},mutations: {updateSharedData(state, newData) {state.sharedData = newData;}},actions: {updateData({ commit }, newData) {commit('updateSharedData', newData);}},getters: {getSharedData(state) {return state.sharedData;}}
});

 组件中使用

<script>
import { mapState, mapActions } from 'vuex';export default {computed: {...mapState(['sharedData'])},methods: {...mapActions(['updateData'])},mounted() {this.updateData('Updated Global State');console.log(this.sharedData);}
};
</script>

provide / inject

父组件

<script>
provide() {return {parentData: 'Provided by Parent'};
}
</script>

 子组件

<script>
inject: ['parentData'],
created() {console.log(this.parentData); // "Provided by Parent"
}
</script>

 子向父传递

父组件

<template><div><child-component :notifyParent="updateParentData"></child-component><p>Parent Data: {{ parentData }}</p></div>
</template><script>
import ChildComponent from './ChildComponent.vue'export default {components: { ChildComponent },data() {return {parentData: ''}},methods: {updateParentData(newData) {this.parentData = newData;}}
}
</script>

子组件

<template><button @click="callParentMethod">Update Parent Data</button>
</template><script>
export default {props: {notifyParent: { type: Function, required: true }},methods: {callParentMethod() {this.notifyParent('New data from child');}}
}
</script>

 v-model 进行双向数据绑定

 父组件

<template><input-typeahead v-model="searchText" /><p>Search Text: {{ searchText }}</p>
</template><script>
import InputTypeahead from './InputTypeahead.vue'export default {components: { InputTypeahead },data() {return {searchText: ''}}
}
</script>

子组件

<template><input type="text" :value="value" @input="onInput" />
</template><script>
export default {model: {prop: 'value',event: 'input'},props: {value: String},methods: {onInput(event) {this.$emit('input', event.target.value);}}
}
</script>

动态组件与 keep-alive 缓存进行间接通信

<template><div><button @click="currentTab = 'tab1'">Tab 1</button><button @click="currentTab = 'tab2'">Tab 2</button><keep-alive><component :is="currentTab === 'tab1' ? Tab1 : Tab2" @change-data="handleDataChange" /></keep-alive></div>
</template><script>
import Tab1 from './Tab1.vue';
import Tab2 from './Tab2.vue';export default {components: { Tab1, Tab2 },data() {return {currentTab: 'tab1',sharedData: {}}},methods: {handleDataChange(data) {this.sharedData = data;}}
}
</script>

其中，Tab1 和 Tab2 组件可以通过 $emit 触发 change-data 事件来更新父组件的状态。当切换回已缓存的组件时，由于状态被 keep-alive 保留，可以继续显示上次离开时的数据或状态。