UniApp 页面元素怎么整合出去一个组件

在 UniApp 项目开发中，经常会遇到这样一种情况：多个页面存在相同的结构和逻辑，如果每个页面都写一遍，不仅冗余，而且维护成本高。这时候，最好的做法就是将公共页面元素提取为一个独立组件，实现复用。

本文将详细介绍 如何将 UniApp 页面中的元素整合提取为一个组件，并提供完整的示例代码。

一、为什么要提取组件？

代码复用

避免多个页面重复写相同的 HTML + CSS + JS。

维护方便

修改样式或逻辑时，只需改组件文件。

结构清晰

页面文件只保留当前页面的业务逻辑，公共部分交给组件。

跨页面复用

同一组件可在多个页面、多个位置使用。

二、适合提取为组件的场景

导航栏、标题栏
例如自定义的 Header、返回按钮、标题文字。
卡片、列表项、信息块
重复出现的展示卡片、列表内容区。
表单元素
表单输入、按钮、校验逻辑等。
公共操作按钮
比如“新增”、“删除”、“保存”等固定按钮区域。

三、提取组件的基本步骤

在 components 目录下创建组件文件

UniApp 建议将组件放在 components/组件名/组件名.vue。

将页面中的 HTML + CSS + JS 复制到组件中

保留需要复用的部分，去掉页面专属逻辑。

通过 props 接收外部参数

组件内部不要写死数据，而是通过 props 动态接收。

通过 emit 向外部传递事件

让组件和外部页面进行交互。

在页面中引入并注册组件

import MyComponent from '@/components/MyComponent/MyComponent.vue'
在 components 对象中注册后即可使用。

四、示例：提取一个公共标题栏组件

假设我们有多个页面都有这样的标题栏：

<view class="header"><text class="back" @click="goBack">返回</text><text class="title">页面标题</text>
</view>

我们希望将它提取成一个 HeaderComponent.vue。

1. 创建组件文件

components/HeaderComponent/HeaderComponent.vue

<template><view class="header"><text class="back" v-if="showBack" @click="$emit('back')">返回</text><text class="title">{{ title }}</text><slot name="right"></slot> <!-- 右侧可自定义插槽 --></view>
</template><script>
export default {name: 'HeaderComponent',props: {title: {type: String,default: ''},showBack: {type: Boolean,default: true}}
}
</script><style scoped>
.header {display: flex;align-items: center;padding: 20rpx;background-color: #fff;border-bottom: 1px solid #eee;
}
.back {margin-right: 20rpx;color: #007aff;
}
.title {font-size: 32rpx;font-weight: bold;
}
</style>

2. 在页面中使用组件

pages/index/index.vue

<template><view><HeaderComponent title="首页" @back="handleBack"><view slot="right"><text @click="goSettings">设置</text></view></HeaderComponent><view class="content">这里是页面内容</view></view>
</template><script>
import HeaderComponent from '@/components/HeaderComponent/HeaderComponent.vue'export default {components: { HeaderComponent },methods: {handleBack() {uni.navigateBack()},goSettings() {uni.navigateTo({ url: '/pages/settings/settings' })}}
}
</script>