Vue 组件入门：把页面拆成可复用的部分

01什么时候拆分组件

当一段界面需要重复使用，或已经拥有独立职责时，可以将其拆成组件。例如文章卡片、导航栏和提示框。不要只根据代码行数拆分，更应关注结构与行为是否构成一个完整单元。

02通过 props 接收数据

下面的 ArticleCard.vue 使用 Vue 3 的 script setup 语法，接收标题和摘要。父组件负责提供内容，卡片组件负责呈现，避免把具体文章写进组件内部。

<script setup>
defineProps({
  title: String,
  summary: String
});
</script>

<template>
  <article>
    <h2>{{ title }}</h2>
    <p>{{ summary }}</p>
  </article>
</template>

03用事件通知父组件

子组件不应直接改写父组件传入的数据。交互发生时，可以通过 emit 发送事件，由父组件决定如何更新状态。这使数据的来源和变化过程更加清晰。

const emit = defineEmits(["select"]);
// 在点击处理函数中通知父组件
emit("select");

04做一次小练习

将文章列表中的卡片提取成组件，传入标题、摘要和分类。再增加一个选中事件，在父组件记录当前选中的文章。检查不同数据是否能共用同一个组件，而无需复制模板。