vue axios二次封装 二次封装elementui

目的：

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

 

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

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

<template>
 <el-button-group>
  <el-button v-for="(btn,index) in this.buttons" :key="index" :type="btn.type ? btn.type:'primary'"
   :icon="btn.icon" :size="btn.size?btn.size:'mini'" @click="btn.click">{{btn.label}}</el-button>
 </el-button-group>
</template>
 
<script>
export default {
 name: 'XxButton', // 注意这里的name命名，就是你以后封装好后使用的组件名
 props: {
  buttons: {
   type: Array,
   required: true
  }
 }
}
</script>

命名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.页面使用