rou/front-end-example

Files

charlie 3435848495 feat: add Vue2 exercises for dynamic styles, lifecycle methods, component communication, and course management dashboard

- 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.

2026-03-23 10:09:29 +08:00

1.1 KiB

Raw Blame History

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

目标

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

你要练什么

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

任务

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

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

文件