《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的話，兩個都會保留。