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');