uniapp中怎么使用easycom 自定义组件

news2024/11/19 13:28:02

一、全局注册

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

Vue.component 的第一个参数必须是静态的字符串。
nvue 页面暂不支持全局组件。

二、局部注册

局部注册之前，在需要引用该组件的页面，导入你想使用的组件。页面引入组件方式分两种：

第一种：传统vue规范

在需要引入自定义组件的页面中，通过 import 方式引入组件（导入），在 components 选项中注册你想要使用的组件（引用），在页面中使用自定义组件名称标签（使用）

因为注册组件的时候定义组件名的方法有两种，所以使用组件名时也有两种方式，如下图解释：
在这里插入图片描述
第二种：通过uni-app的easycom规则

easycom规则*将组件引入精简为一步。只要组件安装在项目的 components 目录下，并符合 components/组件名称/组件名称.vue 目录结构。就可以不用引用、注册，直接在页面中使用。

什么叫符合components/组件名称/组件名称.vue 目录结构？

首先你得在项目跟目录下创建一个components文件
在这里插入图片描述
组件名称/组件名称.vue 如 em-text文件下的em-text.vue

em-text.vue代码就写了个简单的view：

<template>
	<view>
		<view> My name is NO1</view>
	</view>
</template>

在index.vue中使用这个自定义的组件：
在这里插入图片描述
浏览器中运行，便可以展示出自定义组件中的内容：

我们已经成功利用easycom规则来使用自定义组件，在使用的过程中需要注意以下几点：

easycom是自动开启的，不需要手动开启，有需求时可以在pages.json的easycom节点进行个性化设置
·easycom只处理vue组件，不处理小程序组件。暂不处理后缀为.nvue的组件

pages.json中的easycom

在这里可以更改easycom规则的符合components/组件名称/组件名称.vue 目录结构。多加一层文件后如components/文件名称1/组件名称/组件名称.vue 目录结构，比如上面使用的自定义文件路径改为如下：
在这里插入图片描述
在多出有一个文件层级的时候，在使用自定义组件则会报错不显示，我们需要去pages.json中的easycom节点中配置路径，如下代码：

//easycom配置
	"easycom": {
	  "autoscan": true, // autoscan是否开启自动扫描，开启后将会自动扫描符合components/组件名称/组件名称.vue目录结构的组件
	  "custom": {
		  //表示components/em路径下，所有的em-开头文件下，所有的em-开头的vue文件
		  "em-(.*)": "@/components/em/em-$1/em-$1.vue" 
	  }
	},