Vue组件化 - 技术栈

❓ 为什么需要组件？

场景：你要展示3个可折叠面板，直接复制3份代码？
结局：改一个Bug，改三次！💥
解决方案 ：召唤组件------代码界的"乐高积木"！

举个🌰：可折叠面板的逆袭

原始代码：

复制代码

<!-- App.vue中硬编码3次面板 -->
<template>
  <h3>可折叠面板</h3>
  <div class="panel">...</div>
  <div class="panel">...</div>
  <div class="panel">...</div>
</template>

问题：代码臃肿、维护地狱！

组件化后：

复制代码

<!-- MyPanel.vue封装组件 -->
<template>
  <div class="panel">...</div>
</template>

<!-- App.vue优雅复用 -->
<template>
  <h3>可折叠面板</h3>
  <MyPanel />
  <MyPanel />
  <MyPanel />
</template>

效果：改一次，全生效！🎉

总结：

组件 = 独立代码块 （HTML+CSS+JS三合一）

复用场景：重复UI 、复杂功能模块

🎯 组件化：化繁为简的代码哲学

1. 组件是什么？

定义：一个.vue文件，自带HTML、CSS、JS的"代码乐高"
特点：
- 独立：自己玩自己的，不干扰别人
- 复用：哪里需要，搬哪里！

2. 组件化的灵魂

思想：把页面拆成小积木，再拼装成完整城堡🏰
好处：
- 维护简单：改Bug像找乐高块一样快
- 团队协作：你拼城墙，我搭炮塔，互不干扰

🌳 根组件：App.vue的帝王地位

定位：整个应用的顶层Boss ，包裹所有小弟（子组件）
构成：

复制代码

<template>  <!-- 骨架 --> </template>
<script>    <!-- 灵魂 --> </script>
<style>     <!-- 皮肤 --> </style>

彩蛋：想用Less/Sass？加个lang="less"，再npm i less！

🔧 组件的使用四部曲

1. 创建组件

新建BitHeader.vue，填充三件套：

复制代码

<template>
  <div class="bit-header">我是Header</div>
</template>
<script setup></script>
<style scoped>
  .bit-header { background: #8064a2; }
</style>

2. 导入组件

在父组件中召唤它：

复制代码

<script setup>
import BitHeader from './components/BitHeader.vue'
</script>

3. 使用组件

像用HTML标签一样丝滑：

复制代码

<template>
  <BitHeader />  <!-- 大驼峰式 -->
  <bit-header></bit-header>  <!-- 烤串式 -->
</template>

4. 全局注册（VIP通行证）

在main.js中注册，全项目通用：

复制代码

import BitButton from './components/BitButton.vue'
app.component('BitButton', BitButton)  // 大驼峰命名
app.component('bit-button', BitButton) // 烤串命名

效果：任意.vue文件都能用<BitButton />！

💡 组件化实战：搭个页面玩玩！

目标：用组件拼出Header+Main+Footer

复制代码

<!-- App.vue -->
<template>
  <BitHeader />
  <BitMain />
  <BitFooter />
</template>

效果：

彩蛋：全局注册一个<BitButton>，全站按钮风格统一！

🚨 避坑指南

组件命名 ：推荐大驼峰 （如MyPanel），或烤串法 （如my-panel）
作用域CSS ：加scoped，避免样式污染！
组件通信 ：父子用props，全局用Pinia/Vuex（后续篇章解锁！）

🎯 总结

为什么组件：拒绝复制粘贴，拥抱高效复用！
组件化精髓 ：拆（化整为零）→ 装（灵活拼装）
全局注册：一次注册，全站通行！

🚀 现在，打开你的Vue项目，把重复代码变成"乐高块"吧！

（如果卡住，默念："组件在手，天下我有！" 😎）