uniapp组件

uniapp组件的基本概念

uniapp的组件系统基于Vue.js，允许开发者通过自定义组件实现代码复用。组件分为内置组件（如<view>、<text>）和自定义组件，支持跨平台兼容性。

内置组件

uniapp提供了一系列跨平台的内置组件，适配小程序、H5、App等多端：

• 基础组件：<view>（类似<div>）、<text>（文本容器）、<image>（图片显示）。
• 表单组件：<input>、<checkbox>、<picker>等，用于用户交互。
• 导航组件：<navigator>实现页面跳转，支持传参。
• 媒体组件：<video>、<audio>用于多媒体播放。

自定义组件的创建与使用

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

   

   <template>
     <view class="custom-component">
       <text>{{ message }}</text>
     </view>
   </template>
   <script>
   export default {
     props: ['message'], // 接收父组件传递的参数
     data() {
       return {
         localData: '局部数据'
       };
     }
   };
   </script>
   <style>
   .custom-component {
     padding: 10px;
   }
   </style>

2. 注册与使用
   在页面中通过import引入并注册组件：

   <template>
     <view>
       <MyComponent message="父组件传递的数据" />
     </view>
   </template>
   <script>
   import MyComponent from '@/components/MyComponent.vue';
   export default {
     components: { MyComponent }
   };
   </script>

组件通信方式

• Props：父组件通过属性向子组件传递数据。
• 事件发射：子组件通过this.$emit('eventName', data)触发父组件监听的事件。
• 全局状态管理：复杂场景可使用Vuex或pinia管理共享状态。

组件生命周期

uniapp组件生命周期与Vue一致，常用钩子：

• created：组件实例刚创建，未挂载DOM。
• mounted：DOM挂载完成，可操作节点。
• updated：数据更新导致DOM重新渲染后触发。

注意事项

• 样式隔离：默认组件样式隔离，可通过options配置styleIsolation: 'shared'解除。
• 平台差异：部分组件在不同平台表现不同，需测试多端兼容性。
• 性能优化：避免频繁更新组件数据，合理使用v-if和v-show。

通过合理使用组件化开发，可以大幅提升uniapp项目的可维护性和开发效率。