【vue】- Mixin 混入技术

可以把多个组件公用的配置提取成一个混入对象 ，并直接调用

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)