<!-- 父組件（Grandparent.vue） -->
<template>
  <div>父組件</div>
  <Parent />
</template>
<script>
import Parent from './Parent.vue'
export default {
  components: { Parent },
  // provide 可以是對象或函數(shù)（函數(shù)更靈活，可訪問 this）
  provide() {
    return {
      theme: 'dark', // 非響應(yīng)式數(shù)據(jù)
      user: this.currentUser // 可傳遞組件內(nèi)數(shù)據(jù)（需注意響應(yīng)式）
    }
  },
  data() {
    return {
      currentUser: { name: '張三' }
    }
  }
}
</script>
<!-- 子組件（Child.vue，層級：Grandparent -> Parent -> Child） -->
<template>
  <div>
    主題：{{ theme }}
    用戶名：{{ user.name }}
  </div>
</template>
<script>
export default {
  // inject 可以是字符串?dāng)?shù)組（直接指定 key）
  // inject: ['theme', 'user']
  // 也可以是對象（支持默認(rèn)值、重命名）
  inject: {
    theme: {
      from: 'theme', // 對應(yīng) provide 的 key（可選，默認(rèn)與屬性名一致）
      default: 'light' // 未提供時的默認(rèn)值
    },
    userName: {
      from: 'user', // 注入 user 數(shù)據(jù)
      default: () => ({ name: '匿名' }) // 默認(rèn)值為對象時需用函數(shù)返回
    }
  }
}
</script>

<!-- 父組件 -->
provide() {
  return {
    // 傳遞響應(yīng)式對象（data 中的屬性）
    appState: this.appState
  }
},
data() {
  return {
    appState: {
      theme: 'dark', // 響應(yīng)式
      user: { name: '張三' }
    }
  }
}
<!-- 子組件修改后，父組件會同步更新 -->
this.appState.theme = 'light' // 有效（響應(yīng)式）

<!-- 父組件（Grandparent.vue） -->
<template>
  <div>父組件</div>
  <Parent />
</template>
<script setup>
import { provide } from 'vue'
import Parent from './Parent.vue'
// 提供數(shù)據(jù)（可直接提供基本類型或?qū)ο螅?
provide('theme', 'dark')
// 提供響應(yīng)式數(shù)據(jù)（ref/reactive）
const user = { name: '張三' }
provide('user', user)
</script>
<!-- 子組件（Child.vue） -->
<template>
  <div>
    主題：{{ theme }}
    用戶名：{{ user.name }}
  </div>
</template>
<script setup>
import { inject } from 'vue'
// 注入數(shù)據(jù)（指定 key）
const theme = inject('theme', 'light') // 第二個參數(shù)為默認(rèn)值
const user = inject('user', () => ({ name: '匿名' })) // 默認(rèn)值為對象時建議用函數(shù)
</script>

<!-- 父組件 -->
<script setup>
import { provide, ref, reactive } from 'vue'
// ref 響應(yīng)式（基本類型）
const theme = ref('dark')
provide('theme', theme)
// reactive 響應(yīng)式（對象）
const user = reactive({ name: '張三' })
provide('user', user)
// 父組件修改，子組件會同步更新
setTimeout(() => {
  theme.value = 'light'
  user.name = '李四'
}, 2000)
</script>
<!-- 子組件 -->
<script setup>
import { inject } from 'vue'
const theme = inject('theme')
const user = inject('user')
// 子組件修改響應(yīng)式數(shù)據(jù)，父組件也會同步（若需禁止，可用 readonly）
// const user = inject('user') // 可修改
// const user = readonly(inject('user')) // 只讀，防止子組件修改
</script>

// keys.ts
import type { InjectionKey } from 'vue'
export const themeKey: InjectionKey<string> = Symbol('theme')
export const userKey: InjectionKey<{ name: string }> = Symbol('user')
// 父組件
import { provide } from 'vue'
import { themeKey, userKey } from './keys'
provide(themeKey, 'dark') // 類型約束：必須是 string
provide(userKey, { name: '張三' }) // 類型約束：必須符合 { name: string }
// 子組件
import { inject } from 'vue'
import { themeKey, userKey } from './keys'
const theme = inject(themeKey, 'light') // 類型：string
const user = inject(userKey) // 類型：{ name: string } | undefined