- Implement dynamic styles and event handling in Vue2 with a card component. - Create lifecycle methods exercise to simulate async data loading and instance destruction. - Develop a component communication exercise with props, events, and slots. - Build a comprehensive course management dashboard with filtering, statistics, and component interactions.
练习 8:组件通信与综合练习
目标
把 Vue2 最核心的组件能力串起来,完成一个小型页面。
你要练什么
- 组件注册(全局 / 局部)
propsprops校验$emitslotref
任务
请基于页面结构完成以下操作:
- 把课程卡片拆成子组件
- 注册一个全局角标组件
- 父组件通过
props传课程数据 - 给
props补上类型、必填、默认值或校验规则 - 子组件点击按钮后通过
$emit通知父组件切换状态 - 用
slot自定义按钮文案 - 用
ref聚焦输入框