vue 3中provide,inject,ref那些事

我们可以把provide 和 inject的使用想象成是大范围的props的使用，即父组件可以传递信息给子/孙等组件，不用使用props进行层层递进

注意点：

1. provide 和 inject必须在setup()中使用
2. 父组件通过provide()向下传递数据
3. 子/孙组件通过inject()获取从上层传递过来的数据
4. 不限层级 示例：（本文中使用的是typescript因此需要装饰器）

//父组件
import {ref,provide} from "vue";
...
setup(){
    const asideVisible = ref(false);
    provide('asideVisible',asideVisible);
}

//子组件
import { inject, Ref } from "vue";
    export default {
        setup(){
            let asideVisible = inject<Ref<boolean>>('asideVisible');
            const toggleMenu=()=>{
                asideVisible.value=!asideVisible.value;
            }
            return {toggleMenu};
        }
    }

provide('变量名',值)

其中可以通过ref来创造响应式数据，通过provide传递