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>

自定义组件开发

1. 创建组件文件
   在components目录下新建.vue文件，例如my-component.vue：

   <template>
     <view>{{ message }}</view>
   </template>
   <script>
   export default {
     props: ['message'],
     data() {
       return { localData: '局部数据' }
     }
   }
   </script>

2. 注册组件
   全局注册：在main.js中通过Vue.component注册。
   局部注册：在页面中通过components选项引入：

   

   import MyComponent from '@/components/my-component.vue';
   export default {
     components: { MyComponent }
   }

3. 使用组件
   在模板中直接使用：

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

注意事项

1. 组件样式默认隔离，可通过options配置styleIsolation调整。
2. 小程序端自定义组件需在pages.json中配置usingComponents。
3. 避免频繁更新大数据量的props，可能影响性能。

通过合理使用组件化开发，能有效提升uniapp项目的可维护性和复用性。