點燈坊

學而時習之,不亦悅乎

Svelte 之 Props

Sam Xiao's Avatar 2019-11-30

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

Version

macOS Catalina 10.15.1
WebStorm 2019.2.4
Svelte 3.0.0

Declaring Props

<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

Static Props

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

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

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

props001

Dynamic Props

<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。

Spread 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

Conclusion

  • Svelte 的 props 使用上與 attribute binding 一樣,在學習上不會增加額外壓力

Reference

Svelte, Declaring props
Svelte, Default values
Svelte, Spread props