# Provide 跨層級資料傳遞 (5-3)
###### tags: `Vue`、`5. 進階Api`
2022.3.7

  過去是用props&Emit在元件中傳遞資料，複雜又不方便。Vue3推出新的Provide方法，可以取代原本方法，讓元件資料傳遞更為簡單。

### 1. 非響應式(物件撰寫方式)
  此方式在做資料更改時不會同步。
`provide:{預傳遞資料};`
`inject:['預接收資料']`

<div id="app" >
    <oldmoon1></oldmoon1>
</div>
<script>
        const oldmoon2 = {  inject:['data'],
                            template:`<div  style="border:3px blue solid;">
                                      <h1>元件(內)</h1>
                                      <h2>{{ data.name }}</h2>
                                      <h2>{{ data.age }}</h2>
                                      </div>` };

        const app = Vue.createApp({
            data(){
                return{
                    data:{
                        name:'阿明',
                        age: 23,
                    }
                }
            },
            
            provide:{
                data:{
                        name:'阿明',
                        age: 23,
                }
            }

        });

        app.component('oldmoon1',{
            template:`<div style="border:5px #FFAC55 solid;"><h1>元件(中)</h1><oldmoon2></oldmoon2></div>`,
            components:{oldmoon2}
        });
        
        app.mount('#app')

</script>

### 2. 響應式(涵式撰寫方式)
  此方式在做資料更改時會同步。

provide(){
    return{
        data:this.data //預傳送的本地資料
    }
}

`inject:['data']`

---

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

<script>
        const oldmoon2 = {  inject:['data'],
                            template:`<div  style="border:3px blue solid;">
                                      <h1>元件(內)</h1>
                                      <h2>{{ data.name }}</h2>
                                      <h2>{{ data.age }}</h2>
                                      </div>` };

        const app = Vue.createApp({
            data(){
                return{
                    data:{
                        name:'阿明',
                        age: 23,
                    }
                }
            },

            provide(){
                return{
                    data:this.data
                }
            }

        });

        app.component('oldmoon1',{
            template:`<div style="border:5px #FFAC55 solid;"><h1>元件(中)</h1><oldmoon2></oldmoon2></div>`,
            components:{oldmoon2}
        });
        
        app.mount('#app')

</script>