前言

• 經過上個章節的介紹，大家可以了解到 uni-app-網絡請求的基本使用方法
• 那本章節來給大家介紹一下 uni-app-自定義組件 的基本使用方法
• 原本打算是直接寫項目的，在寫項目之前還有個內容需要我在碼一篇文章，所以就先碼這篇文章了
• 本章節的內容比較簡單，大家可以快速的過一遍，然后在項目中使用
• 就是自定義組件，雖然 UniApp 是基于 Vue 的，但是在使用自定義組件的時候，還是有一些需要注意的地方，所以本章節就來給大家介紹一下

步入正題

• 首先我們打開官方文檔：https://uniapp.dcloud.net.cn/component/#easycom
• 在 UniApp 的組件當中，有一個 easycom 的組件規范，只要你遵循了這個規范，就可以進行自定義組件

那么遵循了這個規范又有什么好處呢？

• 傳統 vue 組件，需要安裝、引用、注冊，三個步驟后才能使用組件。easycom 將其精簡為一步
• 只要組件安裝在項目的 components 目錄下或 uni_modules 目錄下，并符合 components/組件名稱/組件名稱.(vue|uvue) 就可以不用引用、注冊，直接在頁面中使用

目錄結構注意：當同時存在 vue 和 uvue 時，uni-app 項目優先使用 vue 文件，而 uni-app x 項目優先使用 uvue 文件

好了，知道了 UniApp 中有這么一個規范之后，我們來試一下，看是不是就可以如此簡單的使用自定義組件了

• 首先我們在項目的 components 目錄下創建一個 ITButton 文件夾
• 然后在 ITButton 文件夾下創建一個 ITButton.vue 文件

ITButton.vue

<template>
	<view :class="['it-btn', type]">
		<slot></slot>
	</view>
</template>

<script>
	export default {
		props: {
			type: {
				type: String,
				default: 'default'
			}
		},
		methods: {

		}
	}
</script>

<style>
	.it-btn {
		width: 400rpx;
		height: 150rpx;
		line-height: 150rpx;
		font-size: 40rpx;
		text-align: center;
	}

	.default {
		background-color: gray;
	}

	.warn {
		background-color: red;
	}

	.primary {
		background-color: deepskyblue;
	}
</style>

到這，我們自定義組件創建好了，官方介紹，只要我們遵循了這個規范，就可以不用引用、注冊，直接在頁面中使用，那么我們就來試一下：

• 在 index.vue 中使用

index.vue

<template>
	<view>
		<ITButton type="primary">我是自定義按鈕哦</ITButton>
	</view>
</template>

• 然后我們運行一下，看看效果

• 很完美哦，我們就不用引用、注冊，就可以直接在頁面中使用了
• 可以根據 type 的不同，來設置不同的樣式，這樣就可以實現一個按鈕，多種樣式的效果了
• 我這個組件已經實現了，好了本文就到這里，下一篇文章我們就來寫項目了

End

• 如果你有任何問題或建議，歡迎在下方留言，我會盡快回復
• 如果你覺得本文對你有幫助，歡迎點贊、收藏，你的支持是我寫作的最大動力

總結

以上是生活随笔為你收集整理的【UniApp】-uni-app-自定义组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。