vue项目实现非父子
Vue 项目中实现非父子组件通信的方法
在 Vue 项目中，非父子组件通信可以通过多种方式实现，以下是几种常见的方法：
使用 Vuex 状态管理
Vuex 是 Vue 的官方状态管理库，适用于中大型项目。通过集中式存储管理应用的所有组件的状态，可以方便地实现非父子组件间的通信。
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
message: ''
},
mutations: {
setMessage(state, payload) {
state.message = payload
}
},
actions: {
updateMessage({ commit }, payload) {
commit('setMessage', payload)
}
}
})在组件中可以通过 this.$store 访问和修改状态：
// ComponentA.vue
methods: {
sendMessage() {
this.$store.dispatch('updateMessage', 'Hello from Component A')
}
}
// ComponentB.vue
computed: {
message() {
return this.$store.state.message
}
}使用 Event Bus
Event Bus 是一个简单的 Vue 实例，用于在组件之间触发和监听事件。
// eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()在发送组件中触发事件：
// ComponentA.vue
import { EventBus } from './eventBus'
methods: {
sendMessage() {
EventBus.$emit('message-event', 'Hello from Component A')
}
}在接收组件中监听事件：
// ComponentB.vue
import { EventBus } from './eventBus'
created() {
EventBus.$on('message-event', (message) => {
console.log(message)
})
}使用 provide/inject
provide 和 inject 是 Vue 提供的一对 API，允许祖先组件向所有子孙组件注入依赖。
// AncestorComponent.vue
export default {
provide() {
return {
sharedData: 'Shared data from ancestor'
}
}
}
// DescendantComponent.vue
export default {
inject: ['sharedData'],
mounted() {
console.log(this.sharedData)
}
}使用全局事件监听
在 Vue 实例上直接使用 $on 和 $emit 进行全局事件监听。
// main.js
Vue.prototype.$eventHub = new Vue()
// ComponentA.vue
methods: {
sendMessage() {
this.$eventHub.$emit('message-event', 'Hello from Component A')
}
}
// ComponentB.vue
created() {
this.$eventHub.$on('message-event', (message) => {
console.log(message)
})
}使用 localStorage 或 sessionStorage
通过浏览器的本地存储实现组件间通信。
// ComponentA.vue
methods: {
sendMessage() {
localStorage.setItem('message', 'Hello from Component A')
}
}
// ComponentB.vue
mounted() {
window.addEventListener('storage', (event) => {
if (event.key === 'message') {
console.log(event.newValue)
}
})
}每种方法都有其适用场景，可以根据项目需求和复杂度选择最合适的方案。
