uniapp组件
uniapp组件基础概念
uniapp的组件系统基于Vue.js，支持跨平台开发（H5、小程序、App等）。组件分为内置基础组件（如<view>、<button>）和自定义组件，需遵循特定规范实现跨平台兼容。
内置组件
uniapp提供以下常用内置组件：
- 视图容器：
<view>、<scroll-view>、<swiper> - 表单元素：
<input>、<checkbox>、<picker> - 导航：
<navigator>（类似<a>标签） - 媒体：
<image>、<video> - 地图：
<map>（需平台支持）
示例：
<template>
<view class="container">
<button @click="handleClick">点击</button>
</view>
</template>自定义组件开发
-
创建组件文件
在components目录下新建.vue文件，例如my-component.vue：<template> <view>{{ message }}</view> </template> <script> export default { props: ['message'], data() { return { localData: '局部数据' } } } </script> -
注册组件
全局注册：在main.js中通过Vue.component注册。
局部注册：在页面中通过components选项引入：
import MyComponent from '@/components/my-component.vue'; export default { components: { MyComponent } } -
使用组件
在模板中直接使用：<my-component message="传递数据"></my-component>
组件通信
-
父传子：通过
props传递数据。 -
子传父：通过
$emit触发事件：
// 子组件 this.$emit('custom-event', payload); // 父组件 <child-component @custom-event="handleEvent"></child-component> -
跨级通信：使用
provide/inject或全局状态管理（如Vuex）。
生命周期
uniapp组件生命周期与Vue一致，常用钩子：
created：组件实例创建后调用。mounted：DOM挂载完成。updated：数据更新导致DOM重新渲染后触发。
平台差异处理
通过条件编译解决跨平台兼容问题：
<!-- #ifdef MP-WEIXIN -->
<view>仅微信小程序显示</view>
<!-- #endif -->注意事项
- 组件样式默认隔离，可通过
options配置styleIsolation调整。 - 小程序端自定义组件需在
pages.json中配置usingComponents。 - 避免频繁更新大数据量的
props，可能影响性能。
通过合理使用组件化开发，能有效提升uniapp项目的可维护性和复用性。
