【UniApp】-uni-app-自定義元件

BNTang發表於2023-12-21
APP元件

前言

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

步入正題

那麼遵循了這個規範又有什麼好處呢？

  • 傳統 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

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

相關文章