在开发过程中,数据传输是一个核心的知识点,掌握了数据传输,相当于掌握了80%的内容。
Vue.js 提供了多种组件间的通信方式,这些方式适应不同的场景和需求。下面是4种常见的通信方式:
1. Props & Events (父子组件通信)
这是最常见的组件间通信方式,适用于父子组件间的数据传递。
Props:父组件通过属性传递数据给子组件。
Events:子组件通过 $emit
触发事件,父组件监听这些事件并做出响应。
示例:
<!-- 父组件 -->
<template><div><ChildComponent :message="parentMessage" @childEvent="handleChildEvent"/></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: { ChildComponent },data() {return {parentMessage: 'Hello from parent'};},methods: {handleChildEvent(eventData) {console.log('Received from child:', eventData);}}
};
</script>
<!-- 子组件 -->
<template><div><p>{{ message }}</p><button @click="sendToParent">Send to Parent</button></div>
</template><script>
export default {props: ['message'],methods: {sendToParent() {this.$emit('childEvent', 'Hello from child');}}
};
</script>
2. $refs (父组件访问子组件)
父组件可以使用 $refs
访问子组件的实例,从而调用其方法或访问其属性。
示例:
<!-- 父组件 -->
<template><div><ChildComponent ref="childRef"/><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>
<!-- 子组件 -->
<script>
export default {methods: {childMethod() {console.log('Called child method');}}
};
</script>
3. Event Bus (兄弟组件或非直接父子组件通信)
当组件之间没有直接的父子关系时,可以使用全局事件总线(Event Bus)来进行通信。
示例:
// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();
<!-- ComponentA.vue -->
<script>
import { EventBus } from './event-bus.js';export default {methods: {sendData() {EventBus.$emit('dataSent', 'Hello from Component A');}}
};
</script>
<!-- ComponentB.vue -->
<script>
import { EventBus } from './event-bus.js';export default {created() {EventBus.$on('dataSent', this.handleData);},beforeDestroy() {EventBus.$off('dataSent', this.handleData);},methods: {handleData(data) {console.log('Received in Component B:', data);}}
};
</script>
4. Vuex (全局状态管理)
当多个组件需要共享状态时,可以使用 Vuex 进行状态管理。
示例:
// store.js
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({state: {sharedData: 'Shared Data'},mutations: {updateSharedData(state, newData) {state.sharedData = newData;}},actions: {setSharedData({ commit }, data) {commit('updateSharedData', data);}},getters: {getSharedData: state => state.sharedData}
});
<!-- App.vue -->
<script>
import { mapGetters, mapActions } from 'vuex';export default {computed: {...mapGetters(['getSharedData'])},methods: {...mapActions(['setSharedData'])}
};
</script>
以上只是 Vue.js 组件间通信的一些基本方式,实际开发中可能还会结合使用其他技巧和模式,如计算属性、混合(mixins)、插槽(slot)等。