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>