Vue3 依赖注入Provide / Inject

Provide / Inject

provide 可以在祖先组件中指定我们想要提供给后代组件的数据或方法，而在任何后代组件中，我们都可以使用 inject 来接收 provide 提供的数据或方法, 如果传递普通的值 是不具有响应式的 需要通过ref reactive 添加响应式
使用场景：当父组件有很多数据需要分发给其子代组件的时候， 就可以使用provide和inject

父组件

<template>
  爷级： <input type="text" v-model="value">
  <A />
  <B />
</template>

<script setup lang="ts">
import A from './components/A.vue'
import B from './components/B.vue'

import { ref,provide } from 'vue'

let value = ref<string>('')


provide('value', value)

</script>

<style scoped>

</style>

子组件

// A组件

<template>
    <div>
        父级： {{ value }}
    </div>
</template>

<script setup lang="ts">
import { inject } from 'vue'

import type { Ref } from 'vue'

const value = inject<Ref<string>>('value')
</script>

<style scoped>

</style>


// B组件


<template>
    <div>
        子级：{{ value }}
    </div>
</template>

<script setup lang="ts">
import { inject } from 'vue'

import type { Ref } from 'vue'

const value = inject<Ref<string>>('value')
</script>

<style scoped>

</style>