vue element-ui 二次封装示例

目的：

基于vue element ui   对btn按钮   实现二次封装

 

1.首先，可以看到前端工程下有一个components目录，在components下新建一个文件夹xx-button，再在xx-button下创建一个index.vue文件，如图：

2.然后在index.vue中写自己的代码。为了规范，注意代码中的name

命名XxButton，以后使用的组件就是XxButton：

3.然后在components下还有一个index.js文件，咱们要在index.js中注册上自己定义的组件：

import XxButton from './xx-button'
 
Vue.component(XxButton.name, XxButton)

 

注意：这个index.js也一定要在main.js中引入，不然就无法使用。当然，你也可以直接在main.js中直接注册组件，这里为了便于组件的统一管理，就在components下建了一个index.js来统一注册组件。

 

4.页面使用