# Mitt跨元件資料傳遞 (4-9)
###### tags: `Vue`、`4. 元件`
2022.3.7

* 引進mitt元件
* 撰寫「傳送方法」
* 撰寫「接收方法」
* 傳遞資料

### 1. 範例

<oldmoon></oldmoon>
<oldmoon1></oldmoon1>

<script type="module">
    import 'https://unpkg.com/mitt/dist/mitt.umd.js'; // 引入mitt套件包
    const emitter = mitt();
    
    const app = Vue.createApp({
            data(){
                return{
                    test:'這是內部資料'
    }}});

    app.component('oldmoon',{
        data(){
                return{
                    product:{
                        name:'玉米蛋餅',
                        price:30,
                        vegan:false
        }}},

        methods:{
                senddata(){
                    emitter.emit('data',this.product);
            }
        },
            
        template:`<button @click="senddata">送出資料</button>`}
    );

        
    app.component('oldmoon1',{
        data(){
                return{
                    data:{}
                }
        },
        created(){
            emitter.on('data',(data)=>{
                this.data = data;
            });
        },
        
        template:`<br><h1>產品</h1>
                  <br><h1>產品名稱:{{data.name}}</h1>
                  <br><h1>產品價格:{{data.price}}</h1>
                  <br><h1>是否為素食:{{data.vegan?'是':'否'}}</h1>`
        })

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