Vue.js 组件精讲

很多人的 Vue 用得像在填表格：模板里塞数据，事件往上抛，props 往下传，页面能跑就不管了。等到要封装一个能被三四个页面复用的组件，或者接手一套别人写的组件库，问题就集中爆发——插槽该怎么设计才不别扭、组件之间怎么通信才不乱、封装到什么程度算合适，全凭感觉。这门课针对的就是这类说不清但躲不过的组件问题。

先确认一下，你的缺口在哪一层

会用 Vue 写页面，和会写 Vue 组件，是两件事。下面几种情况如果有一半以上让你点头，说明你该补的不是语法，而是组件的设计思路。

• 写过 props 和 $emit，但组件的接口一旦变多，就开始互相打架，改一处坏三处。
• 用过插槽，可遇到作用域插槽、具名插槽嵌套时，还是得翻文档，写完也说不出为什么这么写。
• 做了个"通用"组件，结果每个使用它的地方都要传一堆参数去覆盖默认行为，越用越沉。
• 父子、兄弟、跨层级通信混着用，事件总线、provide/inject 全上，最后自己都理不清数据从哪来。
• 组件能跑，但没想过什么时候该拆、什么时候该合，也不知道自己写的算不算"好组件"。

课程盯住的是组件的"设计"，不只是"写法"

讲师的背景值得说明：iView 组件库作者，长期做开源组件，累计开发和维护过大量通用组件。这意味着课里的例子不是临时拼的小 demo，而是从真实组件库里提炼出来的场景——一个组件要同时满足多少种用法、要暴露哪些接口、要在不破坏老用法的前提下加新功能，这些是写业务页面时很少遇到、但封装组件时天天遇到的问题。

课程围绕 Vue.js 组件这条主线展开，重点放在组件的组织方式和实现技巧上。你会看到的是一个组件从需求到成型的推演过程，而不是零散 API 的罗列。包括：组件之间如何约定数据流、如何划分职责边界、如何用插槽把结构控制权交回给使用者、如何在保持接口稳定的同时支持定制。这些内容在业务开发里往往靠"踩坑后自己悟"，这里是把悟的过程摊开讲。

配套练习怎么用才不白做

组件这门手艺，看会了不等于写得出来。建议按这样的节奏推：每学完一种组件模式，先不看示例，自己动手写一个简化版本，再回头对照课里的实现，重点比对三件事——接口设计差在哪、边界情况处理漏了哪些、有没有为了少写几行而牺牲了可读性。写不出来的地方，就是真正的缺口。把练习当成"复刻一个能用的组件"，而不是"抄一遍代码看它跑起来"。

看完之后，你应该能回答这些问题

• 拿到一个需求，怎么判断它该做成组件、该拆成几个组件？
• 一个组件的 props、事件、插槽应该各承担什么，什么该暴露、什么该藏起来？
• 作用域插槽解决了什么用普通 props 解决不了的问题？
• 跨层级通信有哪些做法，各自的代价是什么，什么时候不该用？
• 怎么在不破坏已有用法的前提下，给一个组件加上新能力？

如果你的目标是把自己写组件从"能跑"推进到"敢让别人用"，这门课的着力点正好在这里。带着上面这些问题去看，收获会比从头到尾顺一遍大得多。