可以在多個組件間橫向復用代碼，一個混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被“混合”進入該組件本身的選項。
混入和組件data中數據,方法、計算屬性等合并，重名的就用組件的覆蓋混入對象的，生命周期的鉤子，都會執行，不會覆蓋。
組件可以時訪問混入數據，選項，反之
示例：

<div id="app">
    <!-- 使用組件 -->
    <my-component></my-component>
</div>
<!-- 組件模板 子組件-->
<template id="mycomponent">
    <div>
        {{ msg }}
        <button @click="getInfo">點擊執行混入方法</button>
    </div>
</template>
<script>
    // 定義混入對象
    let mixin = {
        data(){
           return {
               msg:"混入"
            }
        },
        methods:{
            getInfo(){
                console.log("混入方法")
            }
        }
    }

    // 子組件選項對象
    let MyComponent = {
        mixins:[mixin],//將混入對象里的內容添加到當前組件中去，混入對象可以引用幾乎任何Vue組件所能引用的東西
        template: `#mycomponent`,
        data(){
            return{
               counter:0
            } 
        },
        methods：{}
    };

    //  實例中注冊組件
    const vm = new Vue({
        el:"#app",
        data:{},
        components: {
            MyComponent
        }
    })
</script>

顯示結果：

image.png

Vue已經自動將混入對象里的內容添加到組件中去了, 或者可以說是混入到組件內了，
混入對象可以引用幾乎任何Vue組件所能引用的東西, 就好像他是組件本身的一部分

2. 混入對象與組件的選項合并
   如果混入對象和組件間有重復的選項,如果重名的方法或者都有同一個生命周期的鉤子函數,根據他們的類型,Vue會區別對待
   2.1 數據對象合并
   數據對象在內部會進行遞歸合并，并在發生沖突時以組件數據優先。
   示例代碼如下:

<script>
    // 定義混入對象
    let mixin = {
        data() {
            return {
                message: 'hello',
                foo: 'abc'
            }
        }
    }

    //  組件選項對象
    let MyComponent = {
        mixins: [mixin],
        template:"<div></div>",
        data() {
            return {
                message: 'goodbye',
                bar: 'def'
            }
        },
        created(){
            console.log(this.$data)
            //  => { message: "goodbye", foo: "abc", bar: "def" }
        }

    };

    //  實例中注冊組件
    const vm = new Vue({
        el: "#app",
        data: {},
        components: {
            MyComponent
        }
    })
</script>

image.png