可以把多个组件公用的配置提取成一个混入对象 ,并直接调用
1.使用方式:
第一步在vue定义混合,例如:
{
data(){……},
methods:{……}
……
}
第二步使用混入,例如: (1)全局混入:Vue.mixin(导入的模块名) (2)局部混入:mixins:[‘导入的模块名’]
列如:
在一个组件上使用
<el-button
v-if="checkPermission('delEmployee')"
type="text"
size="small"
@click="delFn(row)"
>删除</el-button>
在mixin.js文件中
export default {
// mixin 里面的结构根vue配置方式一致
methods: {
checkPermission(pointName) {
// 判断这个员工的数据是否和 pointName 一样,则显示
const point = this.$store.state.user.userInfo.roles.points
return point.includes(pointName)
}
}
}
全局混入 在main.js中
// 混入写法,可以提取一些公共的vue组件配置 如:methods
import Mymixin from '@/mixin'
// 全局混入 ,在组件上直接调用mixin.js文件methods对象的方法就行了
Vue.mixin(Mymixin)