引言

为了编写可维护可扩展的程序，在uni-app的开发过程中，我们习惯把自己经常用到的功能组件化，uni-app官方社区也有许多开源的组件，可以满足开发过程中的大部分业务需求，不过也有时候找不到自己想要的组件，所以掌握自己编写自定义组件就显得尤为重要了。开发一款高效的组件，既可以简化日常的开发工作，又可以提高自己的编程技能，何乐而不为呢，下面我们来简单的了解一下如何自定义自己的组件把。

编写组件

components目录下编写自己的自定义组件

<template>
	<view>
		<view class="">{{title}}</view>
	</view>
</template>

<script>
	export default {
		props:{
			title: {
				type: [String],
				default: ''
			}
		}
	}
</script>

<style>

</style>

导入组件

pages目录下的页面级组件使用自定义组件

<script>
	import tklist from '@/components/tk-list.vue'
	export default {
		components: {
			tklist
		},
		data() {
			return {
				title:'this is a title'
			}
		}
	}
</script>

使用组件

<template>
	<view class="content">
		<tklist
		:title=title
		>
		</tklist>
	</view>
</template>