Astro Props（Astro 屬性）
你可能對於像 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....