一：概念理解
成对出现：provide和inject是成对出现的
作用：用于父组件向子孙组件传递数据
使用方法：provide在父组件中返回要传给下级的数据，inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。
使用场景：由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据
需要注意的是这里不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据
说起来好像明白了，那我们就在实例中操作一下
先解释一下这张图，三个组件，App.vue(父组件)，Topnav.vue（子组件）,aside是doc.vue里的元素（子组件）
，
//App.vue(父组件)
setup(){
const width = document.documentElement.clientWidth;//获取当前页面的宽度
const menuVisible = ref(width > 500);
provide('menuVisible',menuVisible)//set
})
}
}
//Topnav.vue（子组件）
setup(){
const menuVisible = inject<Ref<boolean>>('menuVisible')//get
}
}
//doc.vue（子组件）
setup(){
const menuVisible = inject<Ref<boolean>>('menuVisible')//get这里就获取到了数据
return{menuVisible}
}
}
