uni-app只支持(.vue 组件)。其他的诸如:动态组件,自定义 render,和 <script type="text/x-template"> 字符串模版等,在非H5端不支持。

easycom【组件自动引入规则】(HBuilderX 2.5.5起支持easycom组件模式。)

  1. 传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom将其精简为一步。 只要组件安装在项目的components目录下,并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册,直接在页面中使用。
  2. 可在(插件市场)下载符合components/组件名称/组件名称.vue目录结构的组件,均可直接使用。
  3. easycom是自动开启的,不需要手动开启,有需求时可以在pages.json的easycom节点进行个性化设置

自定义easycom配置的示例:

"easycom": {
  "autoscan": true, // autoscan是否开启自动扫描,开启后将会自动扫描符合components/组件名称/组件名称.vue目录结构的组件
  "custom": {
  }
}

注意:

  1. easycom方式引入的组件无需在页面内import,也不需要在components内声明,即可在任意页面使用
  2. easycom方式引入组件不是全局引入,而是局部引入。
  3. 在组件名完全一致的情况下,easycom引入的优先级低于手动引入(区分连字符形式与驼峰形式)
  4. 考虑到编译速度,直接在pages.json内修改easycom不会触发重新编译,需要改动页面内容触发。
  5. easycom只处理vue组件,不处理小程序组件。暂不处理后缀为.nvue的组件
  6. nvue页面里的.vue后缀的组件,同样支持easycom

uni-app内置基础组件

uni-app 内置了小程序的所有组件

注意:
原生组件上的事件绑定,需要以 vue 的事件绑定语法来绑定,如 bindchange=“eventName” 事件,需要写成 @change=“eventName”

全局组件(nvue页面暂不支持全局组件)

uni-app 支持配置全局组件,需在 main.js 里进行全局注册,注册后就可在所有页面里使用该组件。

例:
main.js 里进行全局导入和注册

import uniList from './components/uni-list/uni-list.vue'
Vue.component('uni-list',uniList)//Vue.component 的第一个参数必须是静态的字符串

其他vue文件里可直接使用组件

<template>
  <view>
    <uni-list></uni-list>
    </view>
</template>