Vue mixin(混入)

1、mixin配置

mixin中文叫混入或者混合，作用是可以把多个组件共用的配置提取成一个混入对象，就是提取成共用一个配置

2、定义mixin

• 混入（mixin）的定义需是一个对象，然后Vue里的每个配置都可以写在混合对象里，比如,methods,data,mounted等
• 混入里定义的配置会和Vue中配置进行整合，
• 如果混入和Vue配置中都有定义，除mounted是都会生效外，其他的都是以Vue中的配置为主，混入不会去破坏Vue中的配置

在src目录下新建一个mixin.js文件（命名可以随意）

//定义一个混合对象为hunhe
export const hunhe = {
    //如果在vue配置中也定义了同名的方法，则以vue配置中为主
    methods: {
        showName(){
            alert(this.name)
        }
    },
    //如果Vue中也定义了mounted，则都会进行挂载
    mounted() {
        console.log('你好啊！')
    },
}

//定义一个混合对象为hunhe2
export const hunhe2 = {
    //如果在vue配置中也定义了同名的data属性，则以vue配置中为主
    data() {
        return {
            x:100,
            y:200
        }
    },
}

3、使用混入配置

局部引入使用

<template>
    <div>
        <h2 @click="showName">学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
    </div>
</template>

<script>
    //引入混入配置
    import {hunhe,hunhe2} from '../mixin'

    export default {
        name:'School',
        data() {
            return {
                name:'国际幼儿园大班',
                address:'上海',
                x:666
            }
        },

        //配置混入(mixins)，是一个数组
        mixins:[hunhe,hunhe2],
    }
</script>

全局引入使用

在main.js全局引入并设置混入

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

//导入混入配置文件
import {hunhe,hunhe2} from './mixin'
//全局配置混入
Vue.mixin(hunhe)
Vue.mixin(hunhe2)

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

 

在组件中即可直接使用

<template>
    <div>
        <h2 @click="showName">学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2>
    </div>
</template>
<script>
    export default {
        name:'Student',
        data() {
            return {
                name:'张三',
                sex:'男'
            }
        }
    }
</script>