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>