如何在Svelte组件外部调用该组件内部定义的函数

结论 #

你不能直接调用导入的Overlay构造器的close()方法实现关闭，需要先获取Overlay组件的实例引用，再调用实例上的close()方法。

实现步骤 #

1. 在script标签中声明变量存储Overlay组件实例
2. 给页面中的Overlay组件添加bind:this绑定，将组件实例关联到你声明的变量上
3. 在选中事件的回调中调用实例的close()方法即可

完整修改后的代码示例 #

<script>
  import Overlay from 'svelte-overlay';
  // 声明变量存储组件实例
  let overlayInstance;

  const handleSelection = (event) => {
    console.log("Selected "+event.detail.id)
    // 调用实例的close方法，可选链避免实例未挂载时报错
    overlayInstance?.close()
  }
</script>

<!-- 绑定组件实例 -->
<Overlay bind:this={overlayInstance} ... />

原理解释 #

你从svelte-overlay导入的Overlay是组件的构造类，而close()是组件挂载后生成的实例对象才拥有的成员方法，和Python中类方法与实例方法的区别一致：你无法直接调用类本身的实例方法，必须先拿到实例对象后再调用。

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