# Vue學習#23 provide 跨層級資料傳遞
###### tags: `Vue 直播班 - 2022 春季班`

## 什麼是 provide
元件有可能層層包覆在一起的，而 `props` 或是 `emits` 只限定一層之間的資料傳遞，如果有兩層就要寫兩個元件上寫 `props` 或 `emits` 來解決，一旦程式碼過多時出狀況時就不好解決，`provide` 就是一種可以跨元件溝通的工具

## 範例情境

## 使用方式
### 1. 提供資料的元件需要撰寫 `provide` ， provide 有兩種形式第一種是物件第二種是函式

此圖為根元件使用 provide 想要將資料傳給 card2，宣告一個名稱並採物件的形式，並直接把根元件的 data 直接放進去

### 2. 在接收方撰寫 `inject` ， inject 是陣列，裡面存放的是 provide 宣告的物件的名稱

透過 inject 取得 provide 自定義的物件名稱，這樣在元件下就可以透過這個物件取得資料了!

## 修改 inject 取得的資料，並將所有宣告 inject 的元件一起修改值
如果透過在第二層的元件 (也就是情境中的 card2) 修改 inject 帶來的值，那在第一層( card )　的元件 inject 出來的值並不會隨著第二層元件修改而改變

### 那如果要同步修改呢?
那就要將根元件的 provide 改成函式形式

這樣 card2 修改值的時候就會連同所有用 inject 的元件甚至是根元件都會一起被修改值

## 注意! 透過 provide 輸出的資料並不會隨著父層資料得更新有所修改

### 如果希望子層透過 inject 取回來的資料能與上層資料連動，可使用 Vue.computed() 包裝起來

provide() {
    return {
        root: Vue.computed( () => this.root)
    };
}

包裝後的物件，在子層元件的 inject 使用時需要加上 .value 就可以正常運作囉

    template: `<div> root : {{ root.value }}</div>`