/

Astro Props（Astro 屬性）

Astro Props（Astro 屬性）

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

注意：我之前寫過相關文章，你可以在 React Props、Vue Props 和 Svelte Props 找到這些文章。

屬性是我們將信息傳遞給組件的方式。這包括變數和函數。

Astro 組件 也支持屬性。

以下是如何使用它們。

假設你在 src/components/Hello.astro 中定義了一個 Hello 組件：

1
<p>Hello！</p>

在使用組件時，你可以為它傳遞一個名為 name 的屬性，像這樣：<Hello name="Flavio" />，你可以使用以下語法在組件輸出中顯示名稱：

1
<p>Hello {Astro.props.name}！</p>

通常，在組件的 frontmatter 部分使用對象解構將屬性提取到單獨的變量中，這在擁有複雜組件時很方便：

1
2
3
4
---
const { name } = Astro.props
---
<p>Hello {name}！</p>

下面是如何處理多個屬性，以支持這樣的使用方式：<Hello name="Flavio" message="歡迎" />

1
2
3
4
---
const { name, message } = Astro.props
---
<p>{message} {name}！</p>

以這種方式，你可以為未設置的屬性提供默認值：

1
2
3
4
---
const { name = '', message = 'Hello' } = Astro.props
---
<p>{message} {name}！</p>

tags: [“Astro”, “JavaScript”, “React”, “Vue”, “Svelte”, “Components”, “Props”, “Frontmatter”]