vue中的mixin混合的简单使用方法

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
简单的案例：
在A组件和B组件中都有一个相同的方法，showName,此时可以将showName方法抽离出来，mixin.js，并且暴露出去，在A组件和B组件中使用**import {mixin} from '…/mixin.js’和mixins:[mixin]**将其导入，即可实现点击方法

//A组件
<template>
    <div>
        <h2 @click="showName">学校名称{{name}}</h2>
        <h2>学校地址{{address}}</h2>
    </div>
</template>
<script>
//引入混合
import {mixin} from '../mixin.js'
export default {
    name:'School',
    data(){
        return{
            name:'高大上学校',
            address:'安道尔'
        }
    },
    mixins:[mixin]
    // methods:{
    // //    showName(){
    // //        alert(this.name)
    // //    }
    // }
}
</script>
<style scoped>

</style>

//B组件
<template>
    <div>
        <h2 @click="showName">学生名称{{name}}</h2>
        <h2>学生年龄{{age}}</h2>
    </div>
</template>
<script>
import {mixin} from '../mixin.js'

export default {
    name:'School',
    data(){
        return{
            name:'山硅',
            age:'11'
        }
    },
     mixins:[mixin]
    // methods:{
    //    showName(){
    //        alert(this.name)
    //    }
    // }
}
</script>
<style scoped>

</style>

//mixin.js
export const mixin={
    methods:{
        showName(){
            alert(this.name)
        }
    }
}
// export default mixin