Saber教程：自定义组件及其引入方式（全局引入和局部引入）

逃离我推掉我的手 2024-02-25 04:17 10阅读 0赞

> 一般来说，ElementUI提供的都是基础组件，而在我们进行业务开发的时候，会经常有多个组件组合在一起并且会被高频调用的情况，所以这时候就用到自定义组件，那么下面我们来看下如何制作一个最简单的自定义组件。

## 自定义组件制作 ##

*  一般自定义组件都放在components文件夹中，找到后打开目录，新建一个`demo`文件夹和一个`x-button`的vue文件

![在这里插入图片描述][75054c89f4d2451bac2bfbb5dca4ddb3.png]

*  我们加上最简单逻辑的代码，封装一个组件`x-button`，使之加载后自带点击事件

![在这里插入图片描述][f7bf14f0bc464a4b8a18648d274a5345.png]

*  我们再到一开始的Demo页面引入这个自定义组件，查看是否生效
 *  这里有两种方式引入自定义组件，一种是局部引入，一种是全局引入，下面我们来看一下两种方式分别如何

### 局部引入 ###

![在这里插入图片描述][2933347615d54c7d9c92b38ca80e074f.png]  
![在这里插入图片描述][06545a702417404ab83d051891cee0c3.png]  
![在这里插入图片描述][6b2f8545d8684fb39874171cd1fffe72.png]  
这里可以看到，`x-button.vue`文件name设定为`x-button`，在demo.vue引入的时候为驼峰的xButton，挂载在components属性下，这样一来便可以使用x-button组件直接引入了。

打开页面，点击按钮发现方法执行成功：  
![在这里插入图片描述][d4ef2b6eebd845f8a047bab1f33fc93e.png]

### 全局引入 ###

![在这里插入图片描述][58fb468771aa4ff2b5250f37f961cea4.png]  
![在这里插入图片描述][a551cebaf56f4b67bc0cec57877b27b0.png]  
打开页面，发现效果与局部加载一致。

![在这里插入图片描述][f1acf856104f46529d9929d4784e8ad3.png]

[75054c89f4d2451bac2bfbb5dca4ddb3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/21c75792a4dd4b93a8b066cf75e1aaf5.png
[f7bf14f0bc464a4b8a18648d274a5345.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/02771f48a7e345979df1d278a217ec3b.png
[2933347615d54c7d9c92b38ca80e074f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/0138b75d3f1946cf88f0265040ffc118.png
[06545a702417404ab83d051891cee0c3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/aa0df1912d56495e9136f1df614c5377.png
[6b2f8545d8684fb39874171cd1fffe72.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/b723d8219c4d4d9383de7bb26beb85b1.png
[d4ef2b6eebd845f8a047bab1f33fc93e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/abaf2e04a5ca4cacb723678bba2c5ff8.png
[58fb468771aa4ff2b5250f37f961cea4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/cb252867fe2c43e29beceb0617897400.png
[a551cebaf56f4b67bc0cec57877b27b0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/ac94217ff4244b018bf42941978d4f35.png
[f1acf856104f46529d9929d4784e8ad3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/74df45de8b644716a1525553411139f7.png