Vue2学习第十九篇：Vue中的mixin混入

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

混入可以分成局部混入和全局混入，如下代码所示：

1.局部混入 

第一步：定义混入(在src下新建的mixins.js文件里面定义混入)

// 分别暴露
// 定义的是mixin1，分别引入的时候也要写mixin1
export const mixin1 = {
    methods: {
        showName(){
            alert(this.name)
        }
    },
    mounted() {
        console.log("mixin里面的mounted")
    },
}
export const mixin2 = {
    data() {
        return {
            x:100,
            y:200
        }
    },
}

第二步： 在Student.vue和School.vue中使用混入

Student.vue组件：

School.vue组件：

2.全局混入 

第一步：也是在新建的mixins.js文件里面定义混入对象，和上面一样

第二步：在main.js里面引入mixin.js

第三步：也是在main.js里面使用混入，这样全局都能共用mixin里面的配置项了，如下：

// 引入混入(全局混入)
import {mixin1,mixin2} from './mixins'
// 使用混入
Vue.mixin(mixin1)
Vue.mixin(mixin2)