mixin(混合 混入)

mix 混合
英[mɪks] 美[mɪks]

1. 功能

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

2. 使用方式：

第一步：定义混合

{
    data(){....},
    methods:{....}
    ....
}

第二步：使用混合
全局 混入：Vue.mixin(xxx)
局部 混入：mixins:['xxx']

源码

|   App.vue
|   main.js
|   mixin.js
|
\---components
        School.vue
        Student.vue

mixin.js

//分别暴露模式
export const hunhe = {
    methods: {
        showName(){
            alert(this.name)
        }
    },

    mounted() {
        console.log('你好啊！')
    }
}

//分别暴露模式
export const hunhe2 = {
    data() {
        return {
            x:100,
            y:200
        }
    }
}

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'

//全局 混合 引入
import {hunhe,hunhe2} from './mixin'

//关闭Vue的生产提示
Vue.config.productionTip = false

//全局混合 会导致 vm vc 都会有 hunhe hunhe2
Vue.mixin(hunhe)
Vue.mixin(hunhe2)


//创建vm
new Vue({
    el:'#app',
    render: h => h(App)
})