6. 组件基础

这是什么：组件（Component） = 一个独立的小页面片段，有自己的模板和数据，能被反复拿来用。

为什么用：上一章的按钮、列表全散在页面里，再多几行就难维护。拆成组件后，页面各块各管各的，改一处不会牵连一片。

如何用：免构建写法里，组件 = 一个带 template 字符串的配置对象：声明要接收的 props，注册后就能在页面上当普通标签用。

6.1 第一个子组件

组件对象长这样：

<script>
const TaskItem = {
  props: ['text'],                 // 对外声明：需要传入 text
  template: `<li class='task'>{{ text }}</li>`
}
</script>

三大要点：

props 声明「外部要给我什么」——就像函数的参数
template 是这个组件的骨架（HTML 加点 Vue 语法）
组件名惯例 PascalCase（TaskItem，首字母大写）

6.2 注册并在页面里使用

完整页面（可直接跑）：

<!DOCTYPE html>
<html lang='zh-CN'>
<head>
  <meta charset='utf-8'>
  <title>第一个组件</title>
  <style>
    .task { padding: 8px 12px; background: #f7f7f7; border-radius: 6px; margin-bottom: 6px; }
  </style>
  <script src='https://registry.npmmirror.com/vue/3.5.44/files/dist/vue.global.prod.js'></script>
</head>
<body>
  <div id='app'>
    <ul>
      <task-item v-for='(t, i) in tasks' :key='i' :text='t'></task-item>
    </ul>
  </div>

  <script>
    const { createApp, ref } = Vue

    // 子组件：一个带 template 的配置对象
    const TaskItem = {
      props: ['text'],
      template: `<li class='task'>{{ text }}</li>`
    }

    createApp({
      components: { TaskItem },    // 注册后模板里才能用
      setup() {
        const tasks = ref(['学 Vue', '写组件', '过考试'])
        return { tasks }
      }
    }).mount('#app')
  </script>
</body>
</html>

流程三步走：

定义组件对象（模板 + props）
components: { TaskItem } 注册进应用
在模板里当普通标签用（注意：免构建/在 HTML 里直接写模板时要用 kebab-case <task-item>，这是浏览器 HTML 解析的大小写规则决定的）

6.3 组件树

#app（根容器）
  ├── （列表项）× N
  └── 未来可继续拆出的其他组件…

复用是白送的——<task-item> 用在一个 ul 里渲染 5 条也可以存在另一个页面里，写一次到处用。

6.4 拆分粒度

原则：一个大功能 × 一个组件。页面元素重复出现（卡片、输入行、按钮）、可独立变化（弹窗、列表）的都值得拆。

新手常见错误：全部塞根组件里堆 500 行。练到顺手就自然想拆了——就像 HTML 教程教你「块级元素分块」。

6.5 动手改

给 TaskItem 加一条带边框的样式（在页面 <style> 里加 .task 同类选择器）
再造一个 RankBadge 组件（模板只有 1 行），列表每行前都放一个
把 tasks 数据换成你自己的 4 件事

6.6 小结

免构建版组件 = props + template（+ 方法按需加）的配置对象
注册用 components: { ... }，模板里 kebab-case 标签使用
组件像函数一样复用与组合，页面会越来越清晰

下一章：组件通信 🐸