Svelte 之 Props | 點燈坊

Svelte 也是以 Component 為核心，故也提供 Props 供外界傳入資料，其語法設計非常精簡，也善用 ECMAScript 2015 特色。

Version

macOS Catalina 10.15.1
WebStorm 2019.2.4
Svelte 3.0.0

<script>
export let title = 'RxJS in Action'
</script>

{ title }

在 component 中直接使用 export 使 title 成為 props，還可直接用 = 指定其預設值。

一般只有在 module 才會使用 export，如同 $:，當 Svelte compiler 在 component 看到 export 時，會自動編譯成 props

<script>
import Nested from './Nested.svelte'
</script>

<Nested></Nested>

在 component 中使用 import 引用其他 component。

當不指定任何 props 時，將使用其預設值。

props000

<script>
import Nested from './Nested.svelte'
</script>

<Nested title={ 'FP in JavaScript' }></Nested>

若想直接傳固定值給 props，一樣使用 attribute binding 的 {}，唯改傳固定值。

props001

<script>
import Nested from './Nested.svelte'

let name = 'FP in JavaScript'
</script>

<Nested title={ name }></Nested>

若想對 props 傳入 variable，與 attribute binding 語法完全一樣。

props002

<script>
import Nested from './Nested.svelte'

let title = 'FP in JavaScript'
</script>

<Nested { title }></Nested>

若 variable 名稱故意取與 props 名稱一樣，可如同 attribute binding 一樣省略 props。

<script>
export let title = 'RxJS in Action'
export let price = 100
</script>

{ title } / { price }

實務上常會遇到 component 有多個 props，只要多幾個 export 即可。

<script>
import Nested from './Nested.svelte'

let info = {
  title: 'FP in JavaScript',
  price: 100
}
</script>

<Nested { ...info }></Nested>

若同時要提供多個 props，可以先以 props 名稱為 key 準備 object，在 component 以 ES6 的 object spread 展開即可。

props003