在开发过程中，数据传输是一个核心的知识点，掌握了数据传输，相当于掌握了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)等。
