两个组件都用到了同样的方法，为了提升复用率Vue提供了mixin，可以讲方法提出去，然后实现多个组件之间的复用。

1、建一个mixin.js文件

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

2、在使用的组件中引入就可以正常使用了，不管有几个mixins:[]都要写出数组的形式

“hunhe”要与mixin.js文件中保持一致

<template>
    <div @click="showName">
        <h2>姓名:{{name}}</h2>
        <h2>所爱之人:{{love}}</h2>
    </div>
</template>

<script>
    import {hunhe} from '../mixin'
    export default {
        name:'Student',
        data(){
            return {
                name:'卫珂',
                age:18,
                love:'红衣'
            }
        },mixins:[hunhe]
    }
</script>

注：如果混合的里面有数据、方法等等，和组件里的数据冲突，以组件为主。但是mounts的话，两个都会保留。