如何从Svelte组件导出函数和变量

了解如何从Svelte组件导出函数和变量

您知道可以使用以下语法将Svelte组件导入另一个组件中

<script>
import Button from './Button.svelte';
</script>

如果您要导出比默认导出更多的内容怎么办?

好吧,你必须从一个特殊的script标记到组件中,并带有context="module"属性。

这是一个例子。假设您有一个Button组件Button.svelte

<button>A button</button>

并且您想为其他组件提供更改按钮颜色的功能。您可以使用道具,这就是一个例子。或者您可以提供一个函数,称为changeColor

您以这种特殊方式编写和导出它script标签:

<script context="module">
export function changeColor() {
  //...add logic..
}
</script>

<button>A button</button>

警告:我没有实现实际的功能,但您明白了。

请注意,您可以在组件中拥有另一个“普通”脚本标签。

现在,其他组件可以导入Button(这是默认导出),并且changeColor也是功能:

<script>
import Button, { changeColor } from './Button.svelte'
</script>

免费下载我的苗条手册


更多精妙的教程: