# Mixins 混合元件方法 (5-5)
###### tags: `Vue`、`5. 進階Api`
2022.3.7

  Mixins是將不同元件混合到同一個元件中，在混合元件中可以響應互相的資料。當資料變數名稱一樣時，**先後順序為：混合容器元件資料＞後混和的元件＞先混和的元件**。順序較後者會被覆蓋。

* 生命週期能重複觸發

### 1. 範例：混合component_data1、component_data2到元件oldmoon中

<div id="app" >
        <oldmoon></oldmoon>
</div>

<script>
        const app = Vue.createApp({
            data(){
                return{
                    text:'一個元件內在混和多元件',
                }
            }
        });

        const component_data1 = {
            data(){
                return{
                    name:'被混合元件1'
                }
            },
            created(){
                console.log('這是被混和元件1')
            }
        };

        const component_data2 = {
            data(){
                return{
                    name:'被混合元件2'
                }
            },
            created(){
                console.log('這是被混和元件2')
            }
        };

        app.component('oldmoon',{
            data(){
                return{
                    name:'這是元件'
                }
            },
            template:`<h1>{{ name }}</h1>`,
            mixins:[component_data1,component_data2],
            created(){
                console.log('這是元件')
            }
           
        });

        app.mount('#app');
</script>