front-end-example/07-vue2/08-components-communication-and-final

练习 8：组件通信与综合练习

目标

把 Vue2 最核心的组件能力串起来，完成一个小型页面。

你要练什么

• 组件注册（全局 / 局部）
• props
• props 校验
• $emit
• slot
• ref

任务

请基于页面结构完成以下操作：

• 把课程卡片拆成子组件
• 注册一个全局角标组件
• 父组件通过 props 传课程数据
• 给 props 补上类型、必填、默认值或校验规则
• 子组件点击按钮后通过 $emit 通知父组件切换状态
• 用 slot 自定义按钮文案
• 用 ref 聚焦输入框

文件

• starter.html
• starter.js
• answer.html
• answer.js