如何解决将变量从script.js导出到App.svelte
因此,我有一个名为script.js
的JavaScript文件,其中包含一个变量number
。我还尝试将number
导出到一个精巧的应用程序,以便可以在App.svelte
中使用它(并进行反应)。任何帮助这样做的人将不胜感激。
谢谢。
解决方法
您的问题有两件事:
- 如果您从js文件中导出变量,则无论您如何定义它(const或let),它都是只读的
- 如果您希望变量在svelte中具有反应性,则必须在.svelte-file中定义该变量,然后将对其进行赋值(即var =“ value”)
您可以通过在script.js中定义一个setter函数来解决第一个问题:
let number = 0
export const setNb = (value) => {number = value}
第二个问题要求您在.svelte-file中定义一个变量,然后为其分配一个值。变量中的更改是反应性的:
<script>
let num = 0
</script>
<h1 on:click={()=>num=num+1}>click to add. Nb:{num}</h1>
基本上,您可以在其他.js文件中更新变量,但是要使更改生效,必须使用本地.svelte-variable。
解决此问题的最佳方法是使用苗条的商店。
以下是REPL,显示了这些不同的情况:
https://svelte.dev/repl/dd241487e2424d5b9d93fb9fbdd23b6c?version=3.24.1
,在您的模块script.js中:
export onNum(callback) {
afterUpdate(() => { // or another way to detect / signal a num change here
callback(num);
});
};
在您的App.svelte中:
let num = 0;
onNum((n) => num = n);
注意:es6模块是静态的,是一种单例。它将运行一次。当脚本将由其他组件使用时,num会被共享,并且不会再次初始化。如果您需要共享num也可以。您还可以使用闭包或类来创建实例(实例变量)。
我已经使用上述方法来处理多个精简操作的结果,例如字段验证和处理表搜索(和标记)结果。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。