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

免費下載我的苗條手冊