易语言资源网 - 做最全的易语言资源下载社区
【精易招聘】UniApp开发工程师 精易论坛授权登录

【零基础学会uniapp】第7.2课:组件库的引用方式   [复制链接]

    2021-10-25 08:44:07
    uni-app
    易语言资源网
    190 次浏览

7.2 组件库的使用

准备:新建项目时,选择新建 Hello uni-app模板,创建一个示例的组件库。

组件文档说明

组件库的使用

easycom组件规范 (自动引入组件)

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

@ 课件下载、更多教程、遇到问题或者进行交流,请到: https://bbs.125.la/forum.php?mod=forumdisplay&fid=226 进行发帖交流

加QQ群:326576256





点我下载 (已有 5 次下载)

[错误报告]   上一篇:[Neeco] 多文件资源映射包 多个文...     下一篇:[Neeco] Aria2 下载神器封装...