一、mixins(混入)的認識
vue中提供了一種混合機制–mixins，用來更高效的實現元件內容的複用。最開始我一度認為這個和元件好像沒啥區別。。後來發現錯了。下面我們來看看mixins和普通情況下引入元件有什麼區別？
元件在引用之後相當於在父元件內開闢了一塊單獨的空間，來根據父元件props過來的值進行相應的操作，單本質上兩者還是涇渭分明，相對獨立。
而mixins則是在引入元件之後，則是將元件內部的內容如data等方法、method等屬性與父元件相應內容進行合併。相當於在引入後，父元件的各種屬性方法都被擴充了。
單純元件引用：
父元件 + 子元件 >>> 父元件 + 子元件
mixins：
父元件 + 子元件 >>> new父元件

值得注意的是，在使用mixins時，父元件和子元件同時擁有著子元件內的各種屬性方法，但這並不意味著他們同時共享、同時處理這些變數，兩者之間除了合併，是不會進行任何通訊的。最開始看到mixins的時候，天真的我似乎看到了一種向下的類似vuex的資料共享方案，心情十分激動啊。但是仔細一研究官方api和一些技術部落格，才發現自己。。。天真。

二、mixins的使用
1、在assets資料夾下建立一個js檔案

// 建立一個需要混入的物件 
export const mixinTest1 = {
    created() {
        this.hello();
    },
    methods: {
        hello() {
            console.log
 
('mixinTest1');
        }
    }
};

2、在元件中使用剛剛建立的混入

import {mixinTest1} from './../assets/js/mixin';
export default {
    mixins:[mixinTest1],
    name: 'hello',
    data () {
        return {
            msg: 'Welcome to Your Vue.js App'
        }
    }
}

這樣就可以直接呼叫到混入物件中的hello方法

3、如果元件中定義的方法與混入物件中的方法/屬性一樣,元件中的優先順序大於混入物件中的(方法會呼叫多次)

4、混入物件中可以定義抽象方法,使用混入的元件必須重寫該方法

...
methods: {
    handlePlaylist() {
        throw new Error('component must implement handlePlaylist method')
    }
}
...