非父子关系的不同组件之间如何调用对方定义的函数？

• 方案1：全局状态管理库实现（生产环境首选）
  将需要共享的query参数和getData方法逻辑统一抽离到全局状态容器中，两个组件均可直接访问容器内的属性和方法，无需建立组件关联。
  示例代码（以React + Zustand为例，Vue项目可替换为Pinia实现逻辑一致）：

// 全局公共状态定义
import { create } from 'zustand'

const useCommonStore = create((set, get) => ({
  // 存储来自组件A的query参数
  query: null,
  // 组件A更新query时调用该方法同步到全局
  setQuery: (newQuery) => set({ query: newQuery }),
  // 抽离出来的公共getData方法
  getData: () => {
    const currentQuery = get().query
    // 原有getData的业务逻辑写在此处
    console.log('getData执行，参数为', currentQuery)
  }
}))

// 组件A中同步参数
const ComponentA = () => {
  const setQuery = useCommonStore(state => state.setQuery)
  const getData = useCommonStore(state => state.getData)
  // 组件A自身生成的query
  const query = '你的业务参数'

  useEffect(() => {
    // 同步query到全局
    setQuery(query)
    // 组件A自身需要调用时也直接用全局方法
    getData()
  }, [query])

  return <div>Component A</div>
}

// 组件B中直接调用
const ComponentB = () => {
  const getData = useCommonStore(state => state.getData)

  const handleTrigger = () => {
    // 直接调用全局方法，自动使用组件A同步的query参数
    getData()
  }

  return <button onClick={handleTrigger}>调用getData</button>
}

• 方案2：事件总线（发布订阅）实现（轻量场景首选）
  不需要引入额外状态管理库，通过自定义发布订阅逻辑实现调用，组件A提前注册对应事件的回调，组件B触发事件即可执行方法。
  示例代码：

// 全局事件总线工具，可直接存放在公共工具文件中
const eventBus = {
  events: {},
  // 注册事件监听
  on(eventName, callback) {
    if (!this.events[eventName]) this.events[eventName] = []
    this.events[eventName].push(callback)
  },
  // 触发事件
  emit(eventName, ...args) {
    if (this.events[eventName]) {
      this.events[eventName].forEach(cb => cb(...args))
    }
  },
  // 移除事件监听
  off(eventName, callback) {
    if (this.events[eventName]) {
      this.events[eventName] = this.events[eventName].filter(cb => cb !== callback)
    }
  }
}

// 组件A中注册事件
const ComponentA = () => {
  // 组件A自身的query参数
  const query = '你的业务参数'
  // 原有getData方法
  const getData = (query) => {
    // 原有业务逻辑
  }

  useEffect(() => {
    // 注册调用事件，绑定当前组件的query参数
    const handleGetData = () => getData(query)
    eventBus.on('callGetDataFromA', handleGetData)
    // 组件卸载时移除监听，避免内存泄漏
    return () => eventBus.off('callGetDataFromA', handleGetData)
  }, [query])

  return <div>Component A</div>
}

// 组件B中触发事件
const ComponentB = () => {
  const handleTrigger = () => {
    // 触发对应事件即可执行组件A的getData方法，自动使用A的参数
    eventBus.emit('callGetDataFromA')
  }

  return <button onClick={handleTrigger}>调用getData</button>
}

• 方案3：全局对象挂载（仅适合临时调试使用，不推荐生产环境）
  直接将组件A的query和getData方法挂载到window全局对象上，组件B直接从全局对象读取调用即可，缺点是容易造成全局变量污染、命名冲突。
  示例代码：

// 组件A中挂载全局属性
const ComponentA = () => {
  const query = '你的业务参数'
  const getData = (query) => { /* 原有逻辑 */ }

  useEffect(() => {
    window.__A_QUERY__ = query
    window.__A_GET_DATA__ = () => getData(query)
    // 组件卸载时清理全局属性
    return () => {
      delete window.__A_QUERY__
      delete window.__A_GET_DATA__
    }
  }, [query])
}

// 组件B中调用
const ComponentB = () => {
  const handleTrigger = () => {
    window.__A_GET_DATA__?.()
  }
}

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