uni-app 组件的使用(easycom组件模式)

忘是亡心i 2022-10-27 01:56 890阅读 0赞

**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文件里可直接使用组件