组件基础
组件是 Vue 的基本积木：一个 .vue 文件就是一个组件，包含三段——<template> 结构、<script setup> 逻辑、<style> 样式，结构、行为、样式封装在一起。页面由组件拼装而成，组件还能嵌套复用，这是前端工程「可维护」的基石。
使用组件像用 HTML 标签：在父组件里 import StudentCard from './StudentCard.vue'，模板里直接写 <StudentCard />。官方建议组件名用大驼峰（PascalCase），文件名与组件名一致。
scoped 属性值得专门记住：它让样式只作用于当前组件，编译时会给元素加上唯一属性选择器，避免多个组件的 .card 类互相污染。不加 scoped 的样式才是全局样式。
本节要点.vue 文件 = template + script setup + style 三段式；组件当标签用；scoped 让样式局部化，防止类名互相污染。
代码
<!-- StudentCard.vue：一个 .vue 文件就是一个组件 -->
<template>
<div class="card">
<h3>{{ student.name }}</h3>
<p>年龄：{{ student.age }}，城市：{{ student.city }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue';
// 组件的数据与逻辑写在这里
const student = ref({ name: '小明', age: 18, city: '北京' });
</script>
<style scoped>
/* scoped：样式只作用于当前组件，不污染全局 */
.card {
border: 1px solid #ddd;
border-radius: 8px;
padding: 12px;
}
</style>
<!-- 父组件 App.vue 中使用 -->
<!-- <script setup>
import StudentCard from './StudentCard.vue';
</script>
<template>
<StudentCard /> 就像用普通 HTML 标签
<StudentCard /> 可复用任意次
</template> -->
