从全局范围调用 Svelte 组件的函数

Question

我正在创建一个 Sapper 页面，我想在其中使用Google Sign-in button。它需要data-onsuccess属性来指定回调函数。根据我从 Google 的平台 JS 库中发现的内容，它在 global/window范围内查找函数。

有没有办法从全局网页范围访问/调用 Svelte 的组件功能？它可能用于与无法直接加载import到组件中的外部库的互操作。

我正在尝试做的示例：

<script>
  function onSignComponent(user){
    console.log('Signed in');
  }
</script>

<div id="login" class="g-signin2" data-onsuccess="{onSignComponent}" data-theme="dark" />

这项工作onSignComponent在全局范围内时有效，但在组件范围内时无效。

Answer 1

最简单的方法是将函数放在window组件内部：

<script>
  window.onSignIn = user => {
    // ...
  };
</script>

<div id="login" class="g-signin2" data-onsuccess="onSignIn" data-theme="dark" />

Answer 2

一种方法是<svelte:window on:xxx>在组件中添加指令，然后在方法中onSignComponent引发此xxx事件。

在组件中

<svelte:window on:loginSuccess={loginSuccess}></svelte:window>

别的地方

const myEvent = new CustomEvent('loginSuccess', { ... some object });
window.dispatchEvent(myEvent);