如何从其他组件获取值？能否无需组件选择器向其他组件传递事件？

1. 如何从其他组件获取值？ #

根据组件间的层级关系，可采用不同实现方式：

• 父子组件
  • 父组件取子组件值：通过ref（Vue）或useRef.current（React）直接访问子组件属性/方法；也可让子组件通过回调函数把值传递给父组件。
  • 子组件取父组件值：直接接收父组件传入的props（Vue/React通用）。
• 兄弟组件
  • 共同父组件中转：组件A把值传给父组件，父组件再通过props传给组件B。
  • 状态管理工具：将共享值存在全局状态（如Redux、Pinia）中，兄弟组件直接从状态读取。
• 跨层级/任意组件
  • 状态管理库：全局状态存储共享值，任意组件均可读取。
  • 发布订阅模式：组件发布值变更事件，需要取值的组件订阅该事件接收数据。

2. 是否存在无需获取组件选择器，即可向其他组件传递事件的实现方式？ #

存在，以下是常用方案：

• 事件总线（Event Bus）
  自定义简易事件总线，无需依赖组件选择器：

  class EventBus {
    constructor() {
      this.events = {};
    }
    on(eventName, callback) {
      this.events[eventName] = this.events[eventName] || [];
      this.events[eventName].push(callback);
    }
    emit(eventName, ...args) {
      this.events[eventName]?.forEach(callback => callback(...args));
    }
    off(eventName, callback) {
      if (this.events[eventName]) {
        this.events[eventName] = this.events[eventName].filter(cb => cb !== callback);
      }
    }
  }
  export default new EventBus();
  

  发送事件的组件调用emit，接收组件调用on监听即可。
• 状态管理库
  如Redux、Pinia、Vuex，通过修改全局状态触发组件更新，无需组件选择器。比如React中用Redux，组件通过dispatch触发action，订阅对应状态的组件自动响应。
• 框架内置跨组件API
  • Vue的provide/inject：父组件用provide提供方法/数据，深层子组件用inject接收，无需中间组件传递。
  • React的Context API：创建上下文后，任意层级组件可订阅上下文变更，实现事件或数据传递。
• 发布订阅模式
  原理和事件总线类似，借助自定义实现或第三方库，组件仅需关注事件名称，无需关联具体组件实例。

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