## 前言 一般来说,ElementUI提供的都是基础组件,而在我们进行业务开发的时候,会经常有多个组件组合在一起并且会被高频调用的情况,所以这时候就用到自定义组件,那么下面我们来看下如何制作一个最简单的自定义组件。 ## 自定义组件制作 1. 一般自定义组件都放在components文件夹中,找到后打开目录,新建一个demo文件夹和一个x-button的vue文件 ![](https://img.kancloud.cn/41/7e/417e050b18a70068e3e2795aa985473b_1512x662.png) 2. 我们加上最简单逻辑的代码,封装一个组件`x-button`,使之加载后自带点击事件 ![](https://img.kancloud.cn/73/65/73654551b75dd8eaea46922a472c9e4f_1294x704.png) 3. 我们再到一开始的Demo页面引入这个自定义组件,查看是否生效 4. 这里有两种方式引入自定义组件,一种是局部引入,一种是全局引入,下面我们来看一下两种方式分别如何操作 * 局部引入 ![](https://img.kancloud.cn/28/d1/28d1a63b8d3ea7ebc29a877677d445a3_1312x748.png) ![](https://img.kancloud.cn/a8/7f/a87f5edbe1f54578c0ed7772ae6715cc_1246x734.png) ![](https://img.kancloud.cn/49/88/498891395a41797c84432bb80c5af060_976x1196.png) 这里可以看到,x-button.vue文件name设定为`x-button`,在demo.vue引入的时候为驼峰的xButton,挂载在components属性下,这样一来便可以使用x-button组件直接引入了。 打开页面,点击按钮发现方法执行成功 ![](https://img.kancloud.cn/23/8f/238f80ba976c54d4a1a81033a7550af6_1838x1210.png) * 全局引入 ![](https://img.kancloud.cn/81/b1/81b1b0094fe9a29fa60dd3fbec43b295_2104x1740.png) ![](https://img.kancloud.cn/07/6a/076a304e74ea99f6e1717bd7013840ce_786x1052.png) 打开页面,发现效果与局部加载一致 ![](https://img.kancloud.cn/99/d5/99d595f880bd50a81ee796d9fd5ba809_1830x1228.png) ## 结尾语 看到这,相信大家已经知道如何自定义一个最简单而又功能兼备的组件,掌握其中主要知识点,再在这基础上自行拓展,相信大家都可以写出很棒的定制型组件!