uni-app appui组件

在uni-app中，app-ui组件通常用于封装一些跨平台的UI组件，使得开发者可以更方便地在不同平台上使用一致的界面元素。下面是一个简单的示例，展示如何创建一个自定义的app-ui组件，并在页面中使用它。

创建自定义app-ui组件

1. 在components目录下创建组件文件

   首先，在项目的components目录下创建一个新的文件，比如MyCustomUI.vue。

   <template>
     <view class="custom-ui">
       <text>{{ title }}</text>
       <button @click="handleClick">点击我</button>
     </view>
   </template>
   
   <script>
   export default {
     name: 'MyCustomUI',
     props: {
       title: {
         type: String,
         default: '默认标题'
       }
     },
     methods: {
       handleClick() {
         this.$emit('buttonClick');
       }
     }
   }
   </script>
   
   <style scoped>
   .custom-ui {
     padding: 20px;
     border: 1px solid #ccc;
     border-radius: 5px;
   }
   button {
     margin-top: 10px;
     padding: 10px;
     background-color: #007aff;
     color: white;
     border: none;
     border-radius: 5px;
   }
   </style>
   

2. 在页面中使用自定义组件

   接下来，在需要使用该组件的页面中引入并使用它。例如，在pages/index/index.vue中：

   <template>
     <view>
       <MyCustomUI title="自定义标题" @buttonClick="onButtonClick"/>
     </view>
   </template>
   
   <script>
   import MyCustomUI from '@/components/MyCustomUI.vue';
   
   export default {
     components: {
       MyCustomUI
     },
     methods: {
       onButtonClick() {
         console.log('按钮被点击了');
         uni.showToast({
           title: '按钮点击事件',
           icon: 'success'
         });
       }
     }
   }
   </script>
   

说明

• 组件定义：在MyCustomUI.vue中，我们定义了一个简单的UI组件，包含一个文本和一个按钮。按钮点击时会触发handleClick方法，该方法通过$emit向父组件发送buttonClick事件。
• 组件使用：在index.vue中，我们引入了MyCustomUI组件，并通过title属性传递了一个自定义标题。同时，通过监听buttonClick事件来处理按钮点击后的逻辑。

这个示例展示了如何在uni-app中创建和使用自定义的app-ui组件，使得代码更加模块化和可复用。