Vue混入mixin使用

混入（mixin）提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项（如data、methods、mounted等等）。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。 

mixin分为全局混入和局部混入

局部混入使用方法

先定义一个基本的mixin.js，位置可以随便放

mixin也包括vue的基本生命周期

 

let mixin = {
    data(){
        return{
            msg:'this is mixin'
        }
    },
    created(){
        console.log('this is mixin created')
    },
    mounted(){
        console.log('this is mixin mounted')
    },
    methods:{
        hello(){
            console.log('this is mixin methods')
        }
    }
}
export default mixin

在需要混入的组件中引入，这也叫做局部混入

 运行结果

可以看出：

mixin和组件的加载顺序是：先mixin后组件

所以如果是mixin和组件中存在同名函数或者同名变量，组件会把mixin的覆盖，也就是以组件中的为准，mixin和组件中的生命周期会合并，合并后也是以组件的为准

 全局混入使用方法

在全局main.js中引入， 引入之后项目中的任何一个页面都会被注入混入mixin

一旦使用全局混入，它将影响每一个之后创建的 Vue 实例

当项目庞大之后，全局的混入不容易溯源，所以全局混入要慎用

import Vue from "vue"
import mixin from '@/mixin/mixin';
Vue.mixin(mixin)