uni-app只支持(.vue 组件)。其他的诸如:动态组件,自定义 render,和 <script type="text/x-template">
字符串模版等,在非H5端不支持。
easycom【组件自动引入规则】(HBuilderX 2.5.5起支持easycom组件模式。)
- 传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom将其精简为一步。 只要组件安装在项目的components目录下,并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册,直接在页面中使用。
- 可在(插件市场)下载符合components/组件名称/组件名称.vue目录结构的组件,均可直接使用。
- easycom是自动开启的,不需要手动开启,有需求时可以在pages.json的easycom节点进行个性化设置
自定义easycom配置的示例:
"easycom": {
"autoscan": true, // autoscan是否开启自动扫描,开启后将会自动扫描符合components/组件名称/组件名称.vue目录结构的组件
"custom": {
}
}
注意:
- easycom方式引入的组件无需在页面内import,也不需要在components内声明,即可在任意页面使用
- easycom方式引入组件不是全局引入,而是局部引入。
- 在组件名完全一致的情况下,easycom引入的优先级低于手动引入(区分连字符形式与驼峰形式)
- 考虑到编译速度,直接在pages.json内修改easycom不会触发重新编译,需要改动页面内容触发。
- easycom只处理vue组件,不处理小程序组件。暂不处理后缀为.nvue的组件
- 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>