>[success] # Provide 和 Inject 1.相對`props` 需要只能`父子組件`來說， `provide` 和 `Inject` 可以跨層級的從從父組件傳遞到子組件 * [官方圖解](https://staging-cn.vuejs.org/guide/components/provide-inject.html#prop-drilling)  * [官方圖解](https://staging-cn.vuejs.org/guide/components/provide-inject.html#prop-drilling)  >[danger] ##### Provide 1. `Provide` 支持兩個參數，一個是提供被注入屬性名的(`字符串`或者`Symbol`),第二個參數是`value提供的屬性值` ~~~ import { provide } from 'vue' export default { name: 'App', setup() { let count = 100 provide(/* 注入名 */ 'count', /* 值 */ count) return {} }, } ~~~ 2. 雖然第二個參數作為導出的值可以是任意參數(`非相響應式`或`響應式`) 3. 將`Provide` 提供到根組件，即綁定在'createApp' 創建的`vue` 上 ~~~ import { createApp } from 'vue' const app = createApp({}) app.provide(/* 注入名 */ 'message', /* 值 */ 'hello!') ~~~ 4. 官方建議`key` 值使用`Symbol` 作為使用的注入名，`避免潛在的沖突`并且建議將這些`Symbol`導出到一個`文件中進行維護` 官方給的參考案例如下 ~~~ // keys.js export const myInjectionKey = Symbol() ~~~ ~~~ // 在供給方組件中 import { provide } from 'vue' import { myInjectionKey } from './keys.js' provide(myInjectionKey, { /* 要供給的數據 */ }); ~~~ ~~~ // 注入方組件 import { inject } from 'vue' import { myInjectionKey } from './keys.js' const injected = inject(myInjectionKey) ~~~ >[danger] ##### Inject 1. 可以通過 `inject` 來獲取`provide`提供的內容 2. 用法上`Inject` 傳入兩個參數一個是`key` 即通過`key` 獲取`provide` 提供的值，第二個參數是`如果key不存在`，本質上來說會拋出一個運行警告，但是如果設置默認值即會變為默認值 ~~~ // 如果沒有祖先組件提供 "message" // `value` 會是 "這是默認值" const value = inject('message', '這是默認值') const value = inject('key', () => new ExpensiveClass()) ~~~ >[info] ## 使用 1. 像`props` 在使用的時候，一直是不建議直接在子組件去更改，而是讓使用`$emit` 在提供的位置去更改，相對的如果使用了`provide` 并沒有相對應的api 去觸發但也不要在`inject` 接受位置去更改`provide` 狀態，官方建議依舊是 `最好是在數據提供的位置來修改`那么采用的方法就是`可以將修改方法進行共享，在后代組件中進行調用` 官方的例子如下 ~~~ <!-- 在 provider 組件內 --> <script setup> import { provide, ref } from 'vue' const location = ref('North Pole') function updateLocation() { location.value = 'South Pole' } provide('location', { location, updateLocation }) </script> ~~~ ~~~ <!-- 在 injector 組件 --> <script setup> import { inject } from 'vue' const { location, updateLocation } = inject('location') </script> <template> <button @click="updateLocation">{{ location }}</button> </template> ~~~ 最后，如果你想確保從 provide 傳過來的數據不能被 injector 的組件更改，你可以使用readonly() 來包裝提供的值。 ~~~ <script setup> import { ref, provide, readonly } from 'vue' const count = ref(0) provide('read-only-count', readonly(count)) </script> ~~~ >[info] ## 官方 [# 依賴注入](https://cn.vuejs.org/guide/components/provide-inject.html#working-with-symbol-keys)