uni-app自定義組件

引言

爲了編寫可維護可擴展的程序，在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>