从全局范围调用 Svelte 组件的功能

Question

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

有没有办法从全局网页范围 access/call 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

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

在组件中

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

其他地方

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

Answer 2

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

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

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

从全局范围调用 Svelte 组件的功能

Call Svelte component's function from global scope

javascript

google-signin

svelte

sapper