当然，uni-app 支持自定义组件（component），这允许开发者将可复用的代码封装成组件，提高开发效率和代码的可维护性。下面是一个简单的示例，展示如何在 uni-app 中创建和使用自定义组件。

1. 创建自定义组件

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

<!-- components/MyComponent.vue -->
<template>
  <view class="my-component">
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    message: {
      type: String,
      default: 'Hello from MyComponent!'
    }
  }
}
</script>

<style scoped>
.my-component {
  padding: 20px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}
</style>

2. 使用自定义组件

接下来，在页面的模板中使用这个自定义组件。假设我们有一个页面 index.vue。

<!-- pages/index/index.vue -->
<template>
  <view>
    <MyComponent message="Welcome to uni-app!" />
  </view>
</template>

<script>
// 引入自定义组件
import MyComponent from '@/components/MyComponent.vue';

export default {
  components: {
    MyComponent
  }
}
</script>

<style>
/* 页面样式 */
</style>

3. 注册全局组件（可选）

如果你希望在整个应用中都使用某个组件，可以在 main.js 中注册它为全局组件。

// main.js
import Vue from 'vue';
import App from './App';
import MyComponent from './components/MyComponent.vue';

// 注册全局组件
Vue.component('MyComponent', MyComponent);

Vue.config.productionTip = false;

App.mpType = 'app';

const app = new Vue({
    ...App
});
app.$mount();

注册为全局组件后，你不需要在每个页面中单独引入和注册该组件，可以直接在模板中使用它。

总结

以上示例展示了如何在 uni-app 中创建和使用自定义组件。通过封装可复用的组件，你可以提高开发效率，并使代码更加模块化和易于维护。在实际项目中，你可以根据需求创建更多复杂和功能丰富的组件。