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

Call Svelte component#39;s function from global scope(从全局范围调用Svelte组件的函数)

问题描述

我正在创建一个Sapper页面，我想在其中使用Google Sign-in button。需要data-onsuccess属性来指定回调函数。根据我从Google的平台JS库中发现的内容，它在全局/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在全局作用域中，而不在组件作用域中时，此操作有效。

推荐答案

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

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

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

这篇关于从全局范围调用Svelte组件的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！