如何从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>

免费下载我的苗条手册