前言
原生开发最大的痛点：所有代码耦合在一起、无法复用、无法维护。
Vue 框架最核心、最具价值的能力，不是语法糖，而是 组件化开发。
企业所有中后台项目、官网项目、移动端项目，全部基于组件化架构。
本篇带你彻底吃透：
-
什么是组件化思想
-
如何拆分项目组件
-
父子组件如何传值通信
-
如何实现高复用、低耦合的工程化代码
学完本篇，你可以把我们的博客项目重构为Vue3组件化架构，完全对标企业级项目结构。
一、什么是组件化？（通俗理解）
组件：把页面中独立、可复用的区块，拆分成单独的文件/模块。
页面拆分示例：
-
头部导航 → Nav组件
-
文章卡片 → Card组件
-
侧边栏 → Sidebar组件
-
底部版权 → Footer组件
优势：一处编写、多处复用、单独维护、互不干扰。
二、全局组件与局部组件
1. 全局组件（所有页面可用）
// 定义组件 const Card = { template:`<div class="card">我是文章卡片组件</div>` } // 全局注册 createApp({}).component('Card',Card)
2. 局部组件（当前页面独享）
仅当前实例可用，按需引入，性能更高，企业开发首选。
三、核心重难点：父子组件通信
组件化开发 必考、必用、核心中的核心
1. 父传子：props 传值
父组件给子组件传递数据，实现动态渲染、组件复用。
父组件使用
<Card :title="article.title" :content="article.content"></Card>
子组件接收
const Card = { props:['title','content'], template:` <div class="card"> <h3>{````{ title }}</h3> <p>{````{ content }}</p> </div> ` }
2. 子传父：自定义事件 emit
子组件触发事件，向父组件传递数据，解决子组件修改父级状态问题。
子组件触发
methods:{ sendMsg(){ this.$emit('child-event','我是子组件的数据') } }
父组件监听
<Card @child-event="handleReceive"></Card>
四、组件化项目标准拆分规范（企业通用）
以后写所有Vue项目，严格按照三层拆分：
-
公共组件：按钮、卡片、弹窗、导航（全局复用）
-
业务组件：文章列表、评论区、搜索栏（页面业务专属）
-
页面组件：首页、详情页、关于页（顶级页面）
结构清晰、分工明确、迭代维护零压力。
五、组件化核心优势（简历亮点）
-
低耦合、高内聚：每个组件独立功能，互不污染
-
代码复用：公共组件全局复用，减少冗余代码
-
便于维护迭代：修改单个组件不影响整体项目
-
多人协作友好：不同人开发不同组件，互不冲突
六、面试高频问答（组件化必背）
1. 为什么要用组件化开发？
解决传统页面代码耦合严重、无法复用、维护困难的问题，实现功能拆分、代码复用、工程化协作。
2. 父子组件通信方式？
父传子通过props传递数据；子传父通过$emit触发自定义事件。
3. props能不能修改？
不能直接修改，Vue单向数据流原则，子组件如需修改需通过emit通知父组件修改。
七、本篇结语
组件化思想是 前端从"小白代码"跨越到"工程化代码"的标志性能力。
学完本篇，你已经彻底脱离原生单文件开发模式，具备企业标准的项目架构思维。
整套40篇系列：原生基础 + 底层原理 + 网络工程 + 性能优化 + 面试手撕 + Vue3框架工程化，已经完全达到初级前端工程师上岗标准。