Astro 组件基础

什么是组件

Astro 组件是带 .astro 后缀的文件，它既是页面也可以是可复用零件，一个组件把「逻辑」和「模板」放在同一个文件里，用 --- 隔开。

• 上部是组件脚本，只在构建时运行，用来算数据。
• 下部是模板，最终渲染成 HTML。

组件的两段结构

---
// 组件脚本：定义变量、引入其他组件
const greeting = '你好';
---
<!-- 模板：渲染 HTML -->
<p>{greeting}</p>

构建后浏览器看到的是 <p>你好</p>，脚本里的 greeting 不会出现在页面上，只负责把值填进去。

创建组件

假设我们要做一个「文章卡片」。新建 src/components/PostCard.astro。

---
const { title, href } = Astro.props; // 通过 Astro.props 接收父组件传来的属性
---
<a class="post-card" href={href}>
  <h3>{title}</h3>
</a>

在页面里多次调用它，每次传不同的数据。

---
import PostCard from '../components/PostCard.astro';
const posts = [
  { title: 'Astro 入门', href: '/blog/intro' },
  { title: 'Astro 路由', href: '/blog/routing' },
];
---
{posts.map((p) => <PostCard title={p.title} href={p.href} />)}

组件脚本里能写什么

组件脚本本质是一段在构建阶段执行的 JavaScript/TypeScript，你可以：

• 定义变量和函数
• 引入其他组件或模块
• 读取文件、请求接口、处理数据
• 用 Astro.props 接收外部传入的属性

注意，这些代码运行在「服务器/构建时」，不是浏览器里，所以不能直接操作 document、绑定点击事件等需要 DOM 的逻辑。

需要交互时要用客户端脚本（Astro 客户端脚本），相关概念「岛屿架构」会在后面（Astro 岛屿架构）专门讲。

HTML 与组件混写

模板里可以直接写 HTML，也可以嵌入组件，Astro 会按规则渲染。

---
import Header from '../components/Header.astro';
---
<Header />
<section>
  <p>这是一段普通 HTML，也能放进组件文件里。</p>
</section>