如何從 Svelte 組件導出函數和變數

學習如何從 Svelte 組件導出函數和變數

你知道可以使用以下語法將一個 Svelte 組件導入另一個組件中：

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

如果你想要導出更多東西呢？

那麼你必須在組件中使用特殊的 script 標籤，並添加 context="module" 屬性進行導出。

以下是一個示例。假設你有一個名為 Button.svelte 的 Button 組件：

<button>A button</button>

而且你希望其他組件能夠修改該按鈕的顏色。你可以使用 props，這只是一個示例。或者你可以提供一個名為 changeColor 的函數。

你可以在這個特殊的 script 標籤中編寫並導出它：

<script context="module">
export function changeColor() {
 //...添加邏輯...
}
</script>

<button>A button</button>

警告：我沒有實現實際的功能，但你可以理解這個示例。

需要注意的是，你可以在組件中添加另一個“普通”的 script 標籤。

現在其他組件可以導入 Button（默認導出）和 changeColor 函數：

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