第3课：组件基础 - UniApp组件化开发深度解析

📚 课程概述

组件是UniApp开发的核心概念，是实现代码复用和模块化开发的基础。本课程将深入讲解UniApp组件的创建、使用、通信机制以及生命周期管理，帮助你构建可维护、可复用的应用架构。

学习目标：

理解组件化开发的思想和优势
掌握自定义组件的创建和使用方法
理解组件间的数据传递和通信机制
掌握组件的生命周期和状态管理
了解UniApp内置组件的使用方法

🧩 什么是组件化开发？

组件化思想

组件化开发是将复杂的用户界面拆分成独立、可复用的小部件（组件），每个组件都有自己的逻辑和样式，可以独立开发和测试。

组件化开发的优势：

可复用性 ↑ 可维护性 ↑ 开发效率 ↑ 团队协作 ↑

UniApp中的组件类型

内置组件：UniApp提供的原生组件，如view、text、button等
自定义组件：开发者根据业务需求创建的组件
扩展组件：通过插件市场获取的第三方组件

🔧 创建第一个自定义组件

组件文件结构

自定义组件通常放在components目录下，每个组件一个文件夹：

            components/
            ├── user-card/          # 用户卡片组件
            │   ├── user-card.vue   # 组件文件
            │   └── ...
            ├── search-bar/         # 搜索栏组件
            │   ├── search-bar.vue
            │   └── ...
            └── loading/            # 加载组件
                ├── loading.vue
                └── ...
        

基础组件示例

创建一个简单的按钮组件：

在页面中使用组件

📡 组件通信机制

Props - 父组件向子组件传递数据

Props是组件间通信的主要方式，用于父组件向子组件传递数据：

Events - 子组件向父组件传递数据

通过$emit触发自定义事件，实现子组件向父组件通信：

Slots - 内容分发

Slots允许父组件向子组件插入内容：

这是卡片的主要内容

⏱️ 组件生命周期

完整的组件生命周期

UniApp组件生命周期与Vue组件生命周期完全一致：

            export default {
                // 组件创建前
                beforeCreate() {
                    console.log('beforeCreate: 组件实例刚被创建')
                },
                
                // 组件创建后
                created() {
                    console.log('created: 组件实例创建完成')
                },
                
                // 挂载前
                beforeMount() {
                    console.log('beforeMount: 挂载开始之前')
                },
                
                // 挂载后
                mounted() {
                    console.log('mounted: 挂载完成')
                },
                
                // 更新前
                beforeUpdate() {
                    console.log('beforeUpdate: 数据更新时')
                },
                
                // 更新后
                updated() {
                    console.log('updated: 数据更新完成')
                },
                
                // 销毁前
                beforeDestroy() {
                    console.log('beforeDestroy: 实例销毁之前')
                },
                
                // 销毁后
                destroyed() {
                    console.log('destroyed: 实例销毁完成')
                }
            }
        

生命周期执行顺序

组件创建到销毁的生命周期流程：

beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeDestroy → destroyed

🔌 内置组件详解

常用内置组件

组件	说明	常用属性
view	视图容器，相当于div	class, style, @click
text	文本组件	selectable, space, decode
image	图片组件	src, mode, lazy-load
button	按钮组件	type, size, loading, @click
input	输入框组件	value, type, placeholder, @input
scroll-view	可滚动视图区域	scroll-y, scroll-x, @scroll

内置组件使用示例

💡 组件开发最佳实践

组件设计原则：

单一职责：每个组件只负责一个特定功能
可复用性：设计通用的组件接口
可组合性：组件之间可以灵活组合
可测试性：组件应该易于单元测试

常见问题：

组件命名冲突：使用唯一且有意义的组件名
样式污染：使用scoped属性或BEM命名规范
数据流混乱：明确父子组件的数据流向
性能问题：合理使用计算属性和监听器

🔮 下一步学习方向

掌握了组件基础后，下一课我们将深入学习样式与布局系统，了解如何在UniApp中实现精美的界面设计和响应式布局。

← 上一课：页面与路由下一课：样式与布局 →