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

【问题标题】：Call Svelte component's function from global scope从全局范围调用 Svelte 组件的函数
【发布时间】：2020-01-17 02:57:29
【问题描述】：

我正在创建一个 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 在全局范围内时有效，但在组件范围内时无效。

【问题讨论】：

标签： javascript google-signin svelte sapper

【解决方案1】：

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

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

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

【讨论】：

哇，这太简单了。我应该在尝试另一种解决方法（将苗条商店附加到窗口对象）时考虑到这一点。非常感谢！

【解决方案2】：

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

在组件中

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

其他地方

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

【讨论】：

酷。我想过svelte:window，但不知道我可以将它与自定义事件联系起来