组件树结构
{{ comp.icon }}
{{ comp.name }}
×{{ comp.reused }}
页面预览
🏠 电商网站
🔍 搜索框
🛒 购物车(3)
📦
商品 {{ i }}
¥{{ i * 99 + 100 }}
© 2025 电商网站
{{ selectedComp.icon }} {{ selectedComp.name }}
{{ selectedComp.desc }}
数据独立
样式隔离
复用 {{ selectedComp.reused }} 次
核心思想:
组件化就是把一个大页面拆成多个独立的小块。每个组件管理自己的数据、界面和样式,互不干扰。同一个组件可以在不同地方复用多次,传入不同的数据就会显示不同的内容。