Vue3中provide和inject的使用

一 场景

如图所示，黄色矩形是父组件，粉色矩形和蓝色矩形分别是子组件。现在期望通过点击粉色子组件中的月亮图标来控制蓝色组件的展示与否。此时控制展示的变量asideVisible应该放在哪里呢？

二 代码

此时应将变量写在父组件中，利用provide将变量asideVisible提供给后代。两个子组件通过inject获得变量asideVisible，从而可以共享变量。

//父组件
<script lang="ts">
    import {ref,provide} from 'vue';

    export default {
        name: 'App',
        setup() {
            const menuVisible = ref(false);
            provide('menuVisible',menuVisible);
        }
    };
</script>

//粉色子组件
<template>
    <div class="topNavWrapper">
        <div class="logo" @click="changeVisible">
            <img src="src/assets/logo.jpg"/>
        </div>
    </div>
</template>
<script lang="ts">
    import {inject,Ref} from 'vue';
    export default {
        name:'TopNav',
        setup(){
            const menuVisible=inject<Ref<boolean>>('menuVisible');
            //给图标添加click事件
            const changeVisible=()=>{
                menuVisible.value=!menuVisible.value;
            }
            return {changeVisible};
        },
    };
</script>

//蓝色子组件
<template>
   <div class="docWrapper">
       <TopNav/>
       <div class="content">
           <aside v-if="menuVisible">
               <h2>
                   组件列表
               </h2>
           </aside>
       </div>
   </div>
</template>
<script lang="ts">
    import TopNav from '../components/TopNav.vue';
    import {inject, Ref} from 'vue';
    export default {
        name:'Doc',
        components: {TopNav},
        setup(){
            const menuVisible=inject<Ref<boolean>>('menuVisible');
            return {menuVisible};
        },
    };
</script>