当前位置：首页 > VUE

vue项目实现非父子

2026-01-20 14:37:39VUE

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)
    }
  })
}

每种方法都有其适用场景，可以根据项目需求和复杂度选择最合适的方案。

vue项目实现非父子