# Vue學習#23 provide 跨層級資料傳遞 ###### tags: `Vue 直播班 - 2022 春季班` ## 什麼是 provide 元件有可能層層包覆在一起的,而 `props` 或是 `emits` 只限定一層之間的資料傳遞,如果有兩層就要寫兩個元件上寫 `props` 或 `emits` 來解決,一旦程式碼過多時出狀況時就不好解決,`provide` 就是一種可以跨元件溝通的工具 ## 範例情境 ![](https://i.imgur.com/fEdJFzq.png) ## 使用方式 ### 1. 提供資料的元件需要撰寫 `provide` , provide 有兩種形式第一種是物件第二種是函式 此圖為根元件使用 provide 想要將資料傳給 card2,宣告一個名稱並採物件的形式,並直接把根元件的 data 直接放進去 ![](https://i.imgur.com/32yEjkQ.png) ### 2. 在接收方撰寫 `inject` , inject 是陣列,裡面存放的是 provide 宣告的物件的名稱 透過 inject 取得 provide 自定義的物件名稱,這樣在元件下就可以透過這個物件取得資料了! ![](https://i.imgur.com/h6klPfm.png) ## 修改 inject 取得的資料,並將所有宣告 inject 的元件一起修改值 如果透過在第二層的元件 (也就是情境中的 card2) 修改 inject 帶來的值,那在第一層( card ) 的元件 inject 出來的值並不會隨著第二層元件修改而改變 ### 那如果要同步修改呢? 那就要將根元件的 provide 改成函式形式 ![](https://i.imgur.com/AFHaOjP.png) 這樣 card2 修改值的時候就會連同所有用 inject 的元件甚至是根元件都會一起被修改值 ## 注意! 透過 provide 輸出的資料並不會隨著父層資料得更新有所修改 ### 如果希望子層透過 inject 取回來的資料能與上層資料連動,可使用 Vue.computed() 包裝起來 ``` provide() { return { root: Vue.computed( () => this.root) }; } ``` 包裝後的物件,在子層元件的 inject 使用時需要加上 .value 就可以正常運作囉 ``` template: `<div> root : {{ root.value }}</div>` ```