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

免費下載我的苗條手冊


更多精妙的教程: