# [Vue] Provide 與 Inject

###### tags: `Vue`

* 跨越層級的資料傳遞方式
* 父元件使用 `provide(key, value)` 提供資料，其所有後代元件都可以透過 `inject(key)` 取得資料
* `inject` 可帶第二個參數設定預設值，若在祖先元件中找不到指定的 `key`，則會使用預設值
* 適合在小專案或是小區塊的功能開發上使用
* 大型專案仍建議以 Pinia 或 Vuex 為主，Provide / inject 為輔

## 寫法
### Vue 3
#### 使用 `<script setup>`

// 父元件
import { provide, ref } from 'vue';

const foo = ref('foo');

provide('foo', foo);

// 後代元件
import { inject } from 'vue';

const parentFoo = inject('foo', 'default value');

#### 使用 `<script>`

// 父元件
import { provide, ref } from 'vue';

export default {
  setup() {
    const foo = ref('foo');

    provide('foo', foo);
  },
};

// 後代元件
import { inject } from 'vue';

export default {
  setup() {
    const parentFoo = inject('foo', 'default value');
  },
};

#### 使用 Options API
* `provide` 提供的資料不會隨父層資料的更新而改變，若希望透過 `inject` 取回的資料能保有響應性，要使用 `computed()`

// 父元件
import { computed } from 'vue';

export default {
  data() {
    return {
      message: 'Hello',
    };
  },
  provide() {
    return {
      message: computed(() => this.message),
    };
  },
};

## 參考資料
* [Vue 3 官方文件：Provide / Inject](https://vuejs.org/guide/components/provide-inject.html)
* [許國政（Kuro），《重新認識 Vue.js: 008 天絕對看不完的 Vue.js 3 指南》（博碩文化，2021），第2-2章。](https://www.drmaster.com.tw/bookinfo.asp?BookID=MP22026)

---

:::info
建立日期：2024-03-05
更新日期：2024-03-05
:::