【UniApp】-uni-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

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

vue 复制代码
<template>
	<view>
		<ITButton type="primary">我是自定义按钮哦</ITButton>
	</view>
</template>
  • 然后我们运行一下,看看效果
  • 很完美哦,我们就不用引用、注册,就可以直接在页面中使用了
  • 可以根据 type 的不同,来设置不同的样式,这样就可以实现一个按钮,多种样式的效果了
  • 我这个组件已经实现了,好了本文就到这里,下一篇文章我们就来写项目了

End

  • 如果你有任何问题或建议,欢迎在下方留言,我会尽快回复
  • 如果你觉得本文对你有帮助,欢迎点赞、收藏,你的支持是我写作的最大动力
相关推荐
程序猿看视界1 小时前
如何在 UniApp 中实现 iOS 版本更新检测
ios·uniapp·版本更新
行走的鱼儿2 天前
Hbuilder X/Uniapp 关于app运行调试及mumu模拟器运行问题
uni-app·uniapp·hbuilderx·mumu·模拟器配置
漫天转悠5 天前
UniApp在Vue3下使用setup语法糖创建和使用自定义组件
vue.js·uniapp
h185385922447 天前
客运购票售票小程序校园巴士预约售票小程序开发方案php+uniapp
微信小程序·小程序·uni-app·php·uniapp·源码软件
苏世-顾长歌7 天前
解决背景图因为图片路径中携带括号导致图片无法显示的问题
微信小程序·uniapp
家里有只小肥猫9 天前
关于vue生命周期
uni-app·uniapp
Ares码农人生12 天前
vue.js组件和传值以及微信小程序组件和传值
vue.js·微信小程序·uniapp
秋田君12 天前
uni-app资源管理与图标使用全解
vue·uniapp
zhaoyapeng_14 天前
uniapp 小程序 周选择器
微信小程序·小程序·uni-app·uniapp
mosen86815 天前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp