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

單純組件引用：

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

mixins：

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

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

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

場景運用：

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

mixin有兩種定義方式，全局合并和選項合并兩種

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

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

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

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

在home.vue頁面中使用這樣的寫法,來引入這個Mixin:

<template>
    <div>
        <div @click="getMixinData" class="btn">點擊獲取</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)前頁面打印'+this.name)
              console.log('當(dāng)前頁面打印'+this.age)
            },
        }
    }
</script>

<style >

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

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

全局混入

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

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

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

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

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

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

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