《Vue学习》mixin

1、建一个mixin.js文件

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

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

<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的话，两个都会保留。