[TOC] ## 概述 父組件,對子孫組件提供數據  ## Provide (提供) 在組件中提供 ``` <script setup> import { provide } from 'vue' provide(/* 注入名 */ 'message', /* 值 */ 'hello!') // eg // const count = ref(0) // provide('key', count) </script> ``` 全局 Provide ``` import { createApp } from 'vue' const app = createApp({}) app.provide(/* 注入名 */ 'message', /* 值 */ 'hello!') ``` ## Inject (注入) 如果提供給的值是ref,則inject 返回值也是ref,保證了響應式 ``` <script setup> import { inject } from 'vue' const message = inject('message') </script> ``` 設置默認值 ``` // 變量默認值 const value = inject('message', '這是默認值') // 函數默認值 const value = inject('key', () => new ExpensiveClass(), true) ``` ## 示例 ### 可修改的注入 當注入的值是可以被 inject 修改時,最佳實踐是只提供修改的方法,修改還是在 Provide 中完成 provide ``` const location = ref('North Pole') function updateLocation() { location.value = 'South Pole' } provide('location', { location, updateLocation }) ``` inject ``` const { location, updateLocation } = inject('location') ``` ### inject方只讀 ``` import { ref, provide, readonly } from 'vue' const count = ref(0) provide('read-only-count', readonly(count)) ``` ### 使用 Symbol 作注入名 key.js ``` export const myInjectionKey = Symbol() ``` provide ``` provide(myInjectionKey, { /* 要提供的數據 */ }) ``` inject ``` const injected = inject(myInjectionKey) ```