vue3通过provide与inject我们可以把父组件数据传递N个层级的子组件

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>