前言
- 经过上个章节的介绍,大家可以了解到 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
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
- 如果你有任何问题或建议,欢迎在下方留言,我会尽快回复
- 如果你觉得本文对你有帮助,欢迎点赞、收藏,你的支持是我写作的最大动力