Vue.js非父子组件间变量传递方法求助

以下是几种避开父子组件限制的传值方法，可根据项目规模和场景选择：

• 事件总线（Vue 2 常用）
  创建一个独立的Vue实例作为事件中转中心，实现组件间的事件触发与监听：

  // 新建bus.js文件
  import Vue from 'vue'
  export default new Vue()
  
  // 发送数据的组件A
  import Bus from './bus.js'
  // 触发事件并传递数据
  Bus.$emit('transfer-data', targetData)
  
  // 接收数据的组件B
  import Bus from './bus.js'
  // 监听事件获取数据
  mounted() {
    Bus.$on('transfer-data', (data) => {
      this.receivedData = data
    })
  }
  // 组件销毁时解绑事件，防止内存泄漏
  beforeDestroy() {
    Bus.$off('transfer-data')
  }
  

• 状态管理工具（Vue2用Vuex，Vue3用Pinia）
  适合中大型项目，通过全局状态仓库统一管理共享数据：

  // Vue3 Pinia示例：创建store文件
  import { defineStore } from 'pinia'
  export const useShareStore = defineStore('share', {
    state: () => ({
      sharedData: null
    }),
    actions: {
      setSharedData(data) {
        this.sharedData = data
      }
    }
  })
  
  // 组件A更新数据
  import { useShareStore } from './stores/share'
  const store = useShareStore()
  store.setSharedData(yourData)
  
  // 组件B获取数据
  import { useShareStore } from './stores/share'
  import { computed } from 'vue'
  const store = useShareStore()
  const receivedData = computed(() => store.sharedData)
  

• Provide/Inject（跨层级通用）
  祖先组件通过provide提供数据，任意后代组件（包括非直接子组件）用inject接收：

  // Vue3 祖先组件提供数据
  import { provide } from 'vue'
  provide('globalData', targetData)
  
  // 后代组件接收数据
  import { inject } from 'vue'
  const receivedData = inject('globalData')
  

内容的提问来源于stack exchange，提问作者Alex Dalen