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

执行此操作的一种方法是在组件中添加<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组件的函数

2 个答案: