你可能對於像 React、Vue 或 Svelte 這樣的現代 JavaScript 框架中的屬性概念很熟悉。
注意:我之前寫過相關文章,你可以在 React Props、Vue Props 和 Svelte Props 找到這些文章。
屬性是我們將信息傳遞給組件的方式。這包括變數和函數。
Astro 組件 也支持屬性。
以下是如何使用它們。
假設你在 src/components/Hello.astro
中定義了一個 Hello 組件:
<p>Hello!</p>
在使用組件時,你可以為它傳遞一個名為 name
的屬性,像這樣:<Hello name="Flavio" />
,你可以使用以下語法在組件輸出中顯示名稱:
<p>Hello {Astro.props.name}!</p>
通常,在組件的 frontmatter 部分使用對象解構將屬性提取到單獨的變量中,這在擁有複雜組件時很方便:
---
const { name } = Astro.props
---
<p>Hello {name}!</p>
下面是如何處理多個屬性,以支持這樣的使用方式:<Hello name="Flavio" message="歡迎" />
---
const { name, message } = Astro.props
---
<p>{message} {name}!</p>
以這種方式,你可以為未設置的屬性提供默認值:
---
const { name = '', message = 'Hello' } = Astro.props
---
<p>{message} {name}!</p>