你可能對於像 React、Vue 或 Svelte 這樣的現代 JavaScript 框架中的屬性概念很熟悉。

注意:我之前寫過相關文章,你可以在 React PropsVue PropsSvelte 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>