組件在引用之后相當(dāng)于在父組件內(nèi)開(kāi)辟了一塊單獨(dú)的空間纤虽，來(lái)根據(jù)父組件props過(guò)來(lái)的值進(jìn)行相應(yīng)的操作，單本質(zhì)上兩者還是涇渭分明享潜，相對(duì)獨(dú)立。
而mixins則是在引入組件之后嗅蔬，則是將組件內(nèi)部的內(nèi)容如data等方法剑按、method等屬性與父組件相應(yīng)內(nèi)容進(jìn)行合并。相當(dāng)于在引入后澜术，父組件的各種屬性方法都被擴(kuò)充了艺蝴。

單純組件引用：

      父組件 + 子組件 >>> 父組件 + 子組件

mixins：

      父組件 + 子組件 >>> new父組件

作用：多個(gè)組件可以共享數(shù)據(jù)和方法，在使用mixin的組件中引入后鸟废，mixin中的方法和屬性也就并入到該組件中猜敢，可以直接使用。鉤子函數(shù)會(huì)兩個(gè)都被調(diào)用盒延，mixin中的鉤子首先執(zhí)行缩擂。
下面給大家介紹vue mixin的用法，具體介紹如下所示：
混入 (mixin) 提供了一種非常靈活的方式添寺，來(lái)分發(fā) Vue 組件中的可復(fù)用功能胯盯。一個(gè)混入對(duì)象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對(duì)象時(shí)畦贸，所有混入對(duì)象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)陨闹。

官方文檔說(shuō)的很詳細(xì)，通俗易懂的話(huà)來(lái)說(shuō)一個(gè).vue文件由template薄坏，script趋厉，style組成，混入的方法可以把mixin這個(gè)對(duì)象和.vue文件的script里面的內(nèi)容“混入”（mixin對(duì)象的結(jié)構(gòu)和.vue的script里面的結(jié)構(gòu)一樣）胶坠，既此組件既可以調(diào)用組件內(nèi)部的script君账，也可以調(diào)用混入對(duì)象。

場(chǎng)景運(yùn)用：

有兩個(gè)非常相似的組件沈善，他們的基本功能是一樣的乡数，但他們之間又存在著足夠的差異性。他們可能會(huì)公用一部分業(yè)務(wù)邏輯闻牡，但是他們的頁(yè)面結(jié)構(gòu)又不相同净赴。這個(gè)時(shí)候就可以使用mixin來(lái)讓代碼復(fù)用。（類(lèi)似于JS庫(kù)罩润，暴露出來(lái)的方法達(dá)到函數(shù)復(fù)用的效果玖翅。又區(qū)別于JS庫(kù)，它繼承了vue中script所有對(duì)象，包括生命周期金度，data应媚，methods）

mixin有兩種定義方式，全局合并和選項(xiàng)合并兩種

選項(xiàng)合并
首先在根目錄下建一個(gè)mixin文件夾
在里面建一個(gè)index.js,你可以按照你喜歡的任意方式設(shè)置你的目錄結(jié)構(gòu)猜极，但為了結(jié)構(gòu)規(guī)整我喜歡新建一個(gè)mixin目錄中姜。我們創(chuàng)建的這個(gè)文件含有.js擴(kuò)展名（跟.vue相對(duì)，就像我們的其他文件）跟伏，為了使用Mixin我們需要輸出一個(gè)對(duì)象丢胚。

// 創(chuàng)建一個(gè)mixin.js
export const mixin = {
    data() {
        return {
            name: '初始化姓名'
        }
    },
    mounted() {

    },
    methods: {
        // 初始化方法
        initMixin() {
            console.log('公共頁(yè)面打印' + this.name)
            console.log('公共頁(yè)面打印' + this.age)
            this.initMixinData()
        },
    }
}

index.js中，暴露一個(gè)常數(shù)mixin酬姆，mixin 是一個(gè)對(duì)象嗜桌，里面的結(jié)構(gòu)和.vue文件的script相同

在home.vue頁(yè)面中使用這樣的寫(xiě)法,來(lái)引入這個(gè)Mixin:

<template>
    <div>
        <div @click="getMixinData" class="btn">點(diǎn)擊獲取</div>
    </div>
</template>

<script>
    import { mixin } from "@/mixin/index.js"
    export default {
        mixins: [mixin],
        data() {
            return {
                age:'18歲'
            }
        },
        mounted() {
        },
        methods: {
            getMixinData(){
        // 調(diào)用ximin文件內(nèi)方法
                this.initMixin()
        
            },
            initMixinData(){
              console.log('當(dāng)前頁(yè)面打印'+this.name)
              console.log('當(dāng)前頁(yè)面打印'+this.age)
            },
        }
    }
</script>

<style >

    .btn{
        width: 100px;
        height:50px;
        text-align: center;
        line-height:50px;
        border: 1px solid #ccc;
        border-radius: 12px;
    }
</style>

在這里我們可以在頁(yè)面跟組件中方法可以隨意互調(diào)，數(shù)據(jù)共享辞色，一個(gè)相同的組件可以在多個(gè)頁(yè)面靈活的使用
即便我們使用的是一個(gè)對(duì)象而不是一個(gè)組件骨宠，生命周期函數(shù)對(duì)我們來(lái)說(shuō)仍然是可用的，理解這點(diǎn)很重要相满。我們也可以這里使用mounted()鉤子函數(shù)层亿，它將被應(yīng)用于組件的生命周期上。這種工作方式真的很靈活也很強(qiáng)大立美。

全局混入

混入也可以進(jìn)行全局注冊(cè)匿又。使用時(shí)格外小心！一旦使用全局混入建蹄，它將影響每一個(gè)之后創(chuàng)建的 Vue 實(shí)例碌更。使用恰當(dāng)時(shí)，這可以用來(lái)為自定義選項(xiàng)注入處理邏輯洞慎。
具體使用方式

在mixin文件內(nèi)里面建一個(gè)在里面建一個(gè)mixin.js

import Vue from 'vue';
Vue.mixin = {
    data() {
        return {
            name: '初始化姓名'
        }
    },
    mounted() {

    },
    methods: {
        // 初始化方法
        initMixin() {
            console.log('公共頁(yè)面打印' + this.name)
            console.log('公共頁(yè)面打印' + this.age)
            this.initMixinData()
        },
    }
}

在main.js引入進(jìn)行全局注冊(cè)

import myMixin from '@/mixin/mixin.js';
Vue.use(myMixin)

引入全局后就可以正常在頁(yè)面正常調(diào)用了