拿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)
这种场景适合在老项目中对项目中已经使用的组件进行二次封装,这种方式不会影响以前的二次封装!!!
。