Vue—mixin混入

mixin混入

功能：可以把多个组件共用的配置提取成一个混入对象

根据它的功能我们可以看出它的使用条件是多个组件都存在相同的配置的时候使用。比如，在student组件和school组件中都有methods配置项包含着一个showName函数，按照以往的写法就是在两个组件分别都写一遍，但是现在有了这个mixin配置项，我们就不要这么麻烦了，代码的复用也在这体现出来了。

mixin的使用方式

💚第一步定义混入：

在src文件夹下新建一个js文件，在里面书写多个组件共用的配置，并且主动暴露。

vue的两种暴露，分别是export default{}和export const a={}，引入方式分别是（1）import name from '暴露文件所在路径'，（2）import {a} from '暴露文件所在路径'

export const hunru = {
    methods: {
        showName() {
            alert(this.name)
        }
    }
}

💚第二步使用混入：

（1）分别在使用到这个js文件里面配置的组件里面引入这个js文件。

import {hunru} from '../mixin'

（2）通过mixins配置项来使用，值为数组的形式，可放入多个混入对象。

    mixins:[hunru]

mixin总结

mixin的使用方式：

• 全局混入：引入（import {hunru1,hunru2} from '文件路径'）；使用(Vue.mixin(hunru1))、(Vue.mixin(hunru2))
• 局部混入：mixins:[hunru1,hunru2]

当mixin中的配置是data时，采用的是拼接的方式添加进去组件，如果在组件中的data包含了相同的属性，以组件原先的属性为主。

---

一开始博主看到这个英文字母的反应就是“mixin和迷信”，所以根据联想记忆法就想到了：开始是自己先迷信创建mixin，之后带人组队迷信就变成了使用mixins:[ ]，复数加s并且值为数组的形式。（纯属个人娱乐记忆法，我们一定要崇尚科学，反对封建迷信）