vue中混入mixin的理解和应用

vue 中 mixin 的理解和应用

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
戳 我 查 看 官 方 文 档

即 mixin 在引入组件之后，是将组件内部的内容如data、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了。

比如在两个不同的组件的组件中调用sayHi方法，需要重复定义，倘若方法比较复杂，代码将更加冗余。若借助mixins，则变得十分简单：

首先在 mixin.js 文件中定义一个混入对象：

let mixin \= {  
 data () {  
 return {  
 userName: 'mixin'  
 }  
 },  
 created () {  
 this.sayHello()  
 },  
 methods: {  
 sayHello () {  
 console.log(\`${this.userName}, welcome\`)  
 }  
 }  
}  
​  
export default mixin

然后定义两个组件，分别在组件中引入：

<script\>  
 import mixin from '../mixin'  
​  
 export default {  
 mixins: \[mixin\]  
 }  
</script>

则两个组件的打印结果都为：

如果在两个组件 data 中定义了自己的 userName，则打印结果会引用各自组件中的 userName

如果在两个组件methods 中重复定义了相同的方法，则 mixin 中的方法会被覆盖

给其中一个组件定义自己的 userName 和 sayHi 方法：：

<script\>  
    import mixin from '../mixin'  
    ​  
    export default {  
        mixins: \[mixin\],  
        data() {  
            return {  
                userName: 'BComponent'  
            }  
        },  
        created () {  
            this.sayHello()  
        },  
        methods: {  
            sayHello () {  
                console.log(\`Hi, ${this.userName}\`)  
            }  
        }  
    }  
</script>

则打印结果为：

这有点像注册了一个 vue 公共方法，可以在多个组件中使用。还有一点类似于在原型对象中注册方法，并且可以定义相同函数名的方法进行覆盖。

混入也可以进行全局注册，但一般情况下不会全局使用，因为会污染 vue 实例。

我一般在项目中会这样用，比如在多个组件中有用到通用选择器，选项是：是，否，可以使用 mixin 来添加一个统一的字典项过滤器，来实现选项的回显。

1.首先创建一个 Dictionary.js 文件，用于保存字典项对应的含义，并将其暴露出去：

export const COMMON_SELECT = [  
     { code: 0, label: '是'},  
     { code: 1, label: '否'}  
];

注：此处创建的 Dictionary.js 文件，也可以在页面渲染的时候拿来循环选项，具体代码如下：

import { COMMON\_SELECT } from '../constants/Dictionary.js'  
export default {  
    data() {  
        return {  
            comSelectOptions: COMMON\_SELECT  
        }  
    }  
}  
​  
<select v-mode="selStatus">  
     <el-option v-for="item in comSelectOptions" :key="item.code" :label="item.label" :value="item.code"></el-option>  
</select>

2.然后再创建一个 filter.js 文件，保存自定义的过滤函数：

import { COMMON\_SELECT } from '../constants/Dictionary.js'  
​  
export default {  
    filters: {  
        comSelectFilter: (value) => {  
            const target = COMMON_SELECT.filter(item => {  
                return item.code === value  
            })  
            return target.length ? target[0].label : value  
        }  
    }  
}

3.最后在 main.js 中一次性引入 filter 方法：

import filter from './mixin/filter'  
Vue.mixin(filter)

欧了，这样我们就可以在任一组件中随意使用了

<template\>  
 <div\>  
 ....  
 {{ status | comSelectFilter }}  
 ....  
 </div>   
</template>

这个类似于过滤，大家也可以 点此查看过滤器的使用方法