vue3 在setup 使用provide inject 实现响应式传值

provide与inject主要用于从父组件向子组件传递数据。

在2.0我们通常用props接收来自父组件的参数，但是一个要从父子组件传递到孙子组件，这种情况就得从父组件到子组件，再从子组件传到孙子组件一级一级传递下去；引入 provide与inject就不需要一级一级向下传递。而是只需从父组件provide出去，再在需要用的组件里面inject即可。如图

官网

论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。这个特性有两个部分：父组件有一个 ​​provide​​​ 选项来提供数据，子组件有一个 ​​inject​​ 选项来开始使用这些数据。

用法核心：传入一个响应式对象，即可实现响应式传值

点击查看代码

父组件
import {  provide，ref } from 'vue';
   const noticheight = ref();
     function handleCloss(value: any) {
        noticheight.value = 50 + value + 'px';
      }
      function handleOpen(value: any) {
        noticheight.value = 50 + value + 'px !important';
      }
      provide('asideTop', noticheight);

点击查看代码

子组件

import {  inject } from 'vue';
 const top = inject('asideTop');