Svelte组件内如何检测外部是否监听了自定义事件？

当然可以，不用额外加属性，直接用Svelte提供的内部$$events对象就能实现。

• 核心实现代码：

  <script>
    import { createEventDispatcher } from 'svelte';
    const dispatch = createEventDispatcher();
  
    // 检测是否有监听cleared事件
    const hasClearedListener = 'cleared' in $$events;
  
    function triggerClear() {
      if (hasClearedListener) {
        dispatch('cleared');
        // 有监听时的额外逻辑
      } else {
        // 没有监听时的 fallback 逻辑
      }
    }
  </script>
  

• 补充说明：

  • $$events是Svelte内部维护的对象，会包含所有父组件绑定到当前组件的事件监听器，直接通过键名判断即可。
  • 虽然它属于内部API而非公开文档的正式API，但在实际项目中稳定性很高，很多场景都在使用，不用太担心兼容性问题。
  • 相比手动传属性的方式，这种方式完全不需要调用方额外操作，从根源上避免了遗漏或传错的问题。

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