vue3 provide 与 inject
我们通过props属性可以把数据传给组件，而通过provide与inject我们可以把数据传递给N个层级的子组件，比如A组件用了B组件，B组件用了C组件，它可以把组件直接从A传给C组件,vue2使用computed来实现响应式,而vue3中 provide 使用ref或reactive定义的变量即可实现响应式。
A组件传入值,传入了userInfo对象，不用管传给谁了谁，谁都可以去接收key为provideCount的数据
A组件名称 app.vue
<!-- A组件名称 app.vue -->
<template>
<div class="itxst">
<label>A组件显示：{
{state.userInfo.count}}</label>
<!-- 我是A组件调用了B组件,我可以把值传给B或C组件 -->
<bcomp />
</div>
</template>
<script setup>
//导入 provide
import { reactive,provide } from "vue";
import bcomp from "./provideB.vue";
//定义需要传递的对象
const state=reactive({userInfo:{count:1}})
//定了 provide 的 key 和 要传递的值
provide("provideCount",state.userInfo);
</script>
B组件调用C组件,但是我啥也没干
B组件名称 provideB.vue
<!-- B组件名称 provideB.vue -->
<template>
<div class="b">
<!-- 我是B组件调用了C组件 -->
<ccomp/>
</div>
</template>
<script setup>
import { reactive } from "vue";
import ccomp from "./provideCSetup.vue";
</script>
C组件获取A组件传入的值,我修改了userInfo的值，A组件也会跟着变哦。
C组件名称 provideCSetup.vue
<!-- C组件名称 provideCSetup.vue -->
<template>
<div class="c">
<!-- 我是C组件获取了A组件的值 -->
<div >
C组件显示： {
{ userInfo.count }}
</div>
</div>
</template>
<script setup>
import { inject, reactive } from "vue";
//获取 provide 传入的值
const userInfo = inject('provideCount');
//测试响应式
setInterval(function(){userInfo.count=userInfo.count+1},1000)
</script>
