如何点击不同组件的按钮后触发目标函数式组件内的指定方法？

这个需求完全可以实现，核心思路是通过全局事件委托或者框架层面的事件通信机制，匹配用户配置的目标组件标识后触发对应脚本方法，具体实现逻辑如下：

通用无框架依赖方案（适配自定义脚本场景） #

不需要修改目标组件原有逻辑，动态渲染的组件也能正常触发，适合用户可配置的低代码/自定义脚本场景：

• 脚本组件初始化时，全局绑定点击事件监听，优先绑定在捕获阶段避免目标组件阻止冒泡导致监听失效
  示例代码：

  // 捕获阶段绑定，第三个参数传true
  document.addEventListener('click', handleClickTrigger, true)
  

• 编写点击事件回调函数，向上遍历冒泡路径匹配用户配置的组件id/名称，匹配成功执行对应脚本方法
  示例代码：

  // 你的用户配置映射表，结构示例：[{triggerComponentId: 'btn1', triggerComponentName: '提交按钮', scriptId: 'script001'}]
  const clickTriggerConfig = []
  
  function handleClickTrigger(e) {
    let el = e.target
    // 向上遍历查找匹配的组件根元素
    while (el) {
      // 匹配配置的组件id
      const matchedIdConfig = clickTriggerConfig.find(item => item.triggerComponentId === el.id)
      // 匹配配置的组件名（需要组件渲染时给根元素加data-component-name属性存组件名）
      const matchedNameConfig = clickTriggerConfig.find(item => item.triggerComponentName === el.dataset.componentName)
      
      const matchedConfig = matchedIdConfig || matchedNameConfig
      if (matchedConfig) {
        // 执行你脚本组件对应的方法
        runTargetScript(matchedConfig.scriptId)
        break
      }
      el = el.parentElement
    }
  }
  

• 脚本组件销毁时移除全局监听，避免内存泄漏
  示例代码：

  document.removeEventListener('click', handleClickTrigger, true)
  

框架场景优化方案 #

如果你的项目基于Vue/React等框架，可采用框架原生的通信机制，性能更高：

• Vue场景：使用全局事件总线（Vue2用Vue.prototype.$bus，Vue3用mitt等轻量事件库），目标组件点击时emit全局component-click事件，携带自身id、name等标识，你的脚本组件监听该事件，匹配配置的触发条件后执行对应方法
• React场景：用Context或Zustand/Redux等状态管理工具，维护全局的lastClickedComponent状态，目标组件点击时更新该状态，你的脚本组件监听该状态变化，匹配配置后执行对应方法

注意事项 #

• 如果你需要通过组件名匹配，需要在所有组件渲染时给根DOM元素加上data-component-name自定义属性，存储当前组件的名称，才能被全局监听事件捕获到
• 如果存在点击事件透传的需求，不要在回调里阻止事件冒泡，避免影响目标组件原有点击逻辑

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