Vue组件之间的通信

一、通信方式

• Props 和 Events：通过父组件传递 props 给子组件，子组件使用 $emit 发送事件到父组件。
• Event Bus：使用一个中央事件总线来跨组件通信。
• Vuex：使用 Vuex 进行全局状态管理，以便在任何组件间共享状态。
• Provide / Inject：祖先组件使用 provide 传递数据，后代组件通过 inject 接收数据。
• $refs：父组件通过 ref 获取子组件实例，直接调用其方法或访问属性。
• Scoped Slots：使用插槽在父组件中传递数据到子组件，允许子组件根据传递的数据进行渲染。

二、应用举例 

1、Props 和 Events： 

        父组件 (Parent.vue) 

<template><Child :message="parentMessage" @update="handleUpdate" />
</template>
<script>
export default {data() {return { parentMessage: 'Hello from parent' };},methods: {handleUpdate(newMessage) {this.parentMessage = newMessage;}}
}
</script>

        子组件 (Child.vue) 

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

2、Event Bus： 

        事件总线 (eventBus.js) 

import Vue from 'vue';
export const EventBus = new Vue();

        发送消息 (ComponentA.vue) 

<template><button @click="sendMessage">Send Message</button>
</template>
<script>
import { EventBus } from './eventBus';
export default {methods: {sendMessage() {EventBus.$emit('message', 'Hello from Component A');}}
}
</script>

        接收消息 (ComponentB.vue) 

<template><p>{{ receivedMessage }}</p>
</template>
<script>
import { EventBus } from './eventBus';
export default {data() {return { receivedMessage: '' };},created() {EventBus.$on('message', (message) => {this.receivedMessage = message;});}
}
</script>

3、Vuex： 

         Vuex Store (store.js)

import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({state: {message: 'Hello from Vuex'},mutations: {setMessage(state, newMessage) {state.message = newMessage;}}
});

        更新消息 (ComponentA.vue) 

<template><button @click="updateMessage">Update Message</button>
</template>
<script>
import { mapMutations } from 'vuex';
export default {methods: {...mapMutations(['setMessage']),updateMessage() {this.setMessage('Hello from Component A');}}
}
</script>

        显示消息 (ComponentB.vue) 

<template><p>{{ message }}</p>
</template>
<script>
import { mapState } from 'vuex';
export default {computed: {...mapState(['message'])}
}
</script>

4、Provide / Inject： 

        提供数据 (Ancestor.vue) 

<template><Descendant />
</template>
<script>
export default {provide() {return {message: 'Hello from ancestor'};}
}
</script>

        注入数据 (Descendant.vue) 

<template><p>{{ message }}</p>
</template>
<script>
export default {inject: ['message']
}
</script>

5、$refs： 

        父组件 (Parent.vue)         

<template><Child ref="childComponent" /><button @click="callChildMethod">Call Child Method</button>
</template>
<script>
import Child from './Child.vue';
export default {components: { Child },methods: {callChildMethod() {this.$refs.childComponent.someMethod();}}
}
</script>

         子组件 (Child.vue)

<template><p>Child Component</p>
</template>
<script>
export default {methods: {someMethod() {console.log('Method in child called!');}}
}
</script>

6、Scoped Slots： 

        父组件 (Parent.vue) 

<template><Child><template v-slot:default="slotProps"><p>{{ slotProps.message }}</p></template></Child>
</template>
<script>
import Child from './Child.vue';
export default {components: { Child }
}
</script>

         子组件 (Child.vue)

<template><slot :message="'Hello from child'"></slot>
</template>
<script>
export default {}
</script>