在element-ui组件注册之前，对其进行调整

 拿button组件举例

 

 

。

 

 

 

 button.vue     v-bind="$attrs"  让子组件拥有父组件所有的attr属性 （props除外）   v-on="$listeners"   让子组件拥有所有父组件的事件（这个必须有，否则点击父组件不会触发事件）

 

<template>
    <Button 
        v-if="pagePermission[$attrs.name] != false"
        :disabled="disabled"
        v-bind="$attrs"
        v-on="$listeners">
        <slot></slot>
    </Button>
</template>

<script>
import {Button} from "element-ui";
import { mapState } from 'vuex';
export default {
    name:"el-button",
    components:{
        Button
    },
    props:{
        disabled:{
            // 按钮是否可以点击
            type:Boolean,
            default:false
        }
    },
    computed:{
        ...mapState(['pagePermission']),
    }
}
</script>

 

 

 

 

index.js

import elButton from "./button.vue"


elButton.install = function(Vue) {
    Vue.component(elButton.name, elButton);
};

export default elButton;

然后在main.js中引入：

import elButton from "@/ai-comp/el-button/index.js"

注册：

Vue.use(elButton)

这种场景适合在老项目中对项目中已经使用的组件进行二次封装，这种方式不会影响以前的二次封装！！！

 

 

 

 

。