【UniApp】-uni-app-自定义组件

合集 - UniApp(23)

1.【UniApp】-uni-app概述2023-12-072.【UniApp】-uni-app全局样式和局部样式2023-12-073.【UniApp】-uni-app-全局数据和局部数据2023-12-084.【UniApp】-uni-app-内置组件2023-12-095.【UniApp】-uni-app-扩展组件2023-12-096.【UniApp】-uni-app-修改组件主题和样式2023-12-107.【UniApp】-uni-app-OptionAPI应用生命周期和页面生命周期2023-12-108.【UniApp】-uni-app-CompositionAPI应用生命周期和页面生命周期2023-12-119.【UniApp】-uni-app-路由2023-12-1610.【UniApp】-uni-app-传递数据2023-12-1611.【UniApp】-uni-app-CompositionAPI传递数据2023-12-1712.【UniApp】-uni-app-数据传递补充2023-12-1713.【UniApp】-uni-app-数据缓存2023-12-1714.【UniApp】-uni-app-pinia存储数据2023-12-1915.【UniApp】-uni-app-网络请求2023-12-20

16.【UniApp】-uni-app-自定义组件2023-12-21

17.【UniApp】-uni-app-项目实战页面布局(苹果计算器)2023-12-2418.【UniApp】-uni-app-处理项目输入数据(苹果计算器)2023-12-2419.【UniApp】-uni-app-动态计算字体大小(苹果计算器)2023-12-2520.【UniApp】-uni-app-项目计算功能(苹果计算器)2023-12-2621.【UniApp】-uni-app-打包成网页2023-12-2822.【UniApp】-uni-app-打包成小程序2023-12-2823.『UniApp』-uni-app-打包成App2023-12-30

收起

前言

• 经过上个章节的介绍，大家可以了解到 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

• 如果你有任何问题或建议，欢迎在下方留言，我会尽快回复
• 如果你觉得本文对你有帮助，欢迎点赞、收藏，你的支持是我写作的最大动力