[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) ```