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

如何安装svelte

You know that you can import a Svelte component into another using the syntax

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

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

What if you want to export something more than the default export?

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

Well, you must export it from a special script tag into the component, with the context="module" attribute.

好吧，您必须使用context="module"属性将其从特殊script标签导出到组件中。

Here’s an example. Say you have a Button component in Button.svelte:

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

<button>A button</button>

and you want to provide other components the ability to change the color of the button. You could use props, that’s one example. Or you can provide a function, called changeColor.

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

You write and export it in this special script tag:

您可以在以下特殊script标记中编写和导出它：

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

<button>A button</button>

Warning: I did not implement the actual functionality, but you get the idea.

警告：我没有实现实际的功能，但是您明白了。

Note that you can have another “normal” script tag, in the component.

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

Now other components can import Button, which is the default export, and the changeColor function too:

现在其他组件可以导入Button(这是默认导出)，也可以导入changeColor函数：

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

翻译自: https://flaviocopes.com/svelte-export-from-component/

如何安装svelte