本帖最后由 项目部002 于 2021-10-26 15:26 编辑
7.2 组件库的使用
准备:新建项目时,选择新建 Hello uni-app 模板,创建一个示例的组件库。
组件文档说明
组件库的使用
HBuilderX 2.5.5 起支持
传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom 将其精简为一步。
- 组件安装在项目的
components 目录下或uni_modules 目录下
- 符合
components或uni_modules/组件名称/组件名称.vue 目录结构。
例如:components/uni-rate/uni-rate.vue
此时,uni-rate,不用在script里注册和引用,就可以直接使用了。
<template>
<view>
<uni-rate></uni-rate><!-- 这里会显示一个五角星,并且点击后会自动亮星 -->
</view>
</template>
<script>
// 这里不用import引入,也不需要在components内注册uni-rate组件。template里就可以直接用
export default {
data() {
return {
}
}
}
</script>
不管components目录下安装了多少组件,easycom 打包后会自动剔除没有使用的组件,对组件库的使用尤为友好。
easycom 是自动开启的,不需要手动开启
手动引用组件
如果不使用easycom ,手动引用和注册vue组件,则需要分3步写如下代码:
-
import导入组件
-
components里注册组件
-
template中使用组件
<template>
<view>
<uni-rate text="1"></uni-rate><!-- 3.使用组件 -->
</view>
</template>
<script>
import uniRate from '@/components/uni-rate/uni-rate.vue';//1.导入组件
export default {
components:{
uniRate
}//2.注册组件
}
</script>
本课参考链接:
https://uniapp.dcloud.net.cn/component/README?id=uniui
home.php?mod=space&uid=70631 课件下载、更多教程、遇到问题或者进行交流,请到: https://bbs.125.la/forum.php?mod=forumdisplay&fid=226 进行发帖交流
加QQ群:326576256
视频教程在线观看:https://www.eyuyan.tv/?mod=play&tvid=3226
课件下载: 【从资源网下载】
从GIT关注:
https://gitee.com/JYtechnology/uniapp-learn |