Vue3 如何用 provide 和 inject 制作一个点击显示/隐藏列表的功能

• 最近我用 vue3 做的项目里，有一个功能需要我点击网站上的 logo 即可展开一个边栏，再次点击即可隐藏

• 我用的方法是 provide 和 inject

• 以下是示意图

步骤

1. 在 App.vue 里放入一个 menuVisible 的变量，它是一个 ref ，也就是一个盒子，里面有个值为 false

2. 把 menuVisible 标记为所有后代都可以使用，可以用 provide() 来标记（相当于 set），示例标记为 ‘xxx’, 它的值为 menuVisible

3. 然后我现在有两个子组件，一个是 Topnav ，一个是 Doc（这里我的 Doc 组件里引入了 Topnav 组件） ，这两个组件都需要获取 menuVisible，可以用 injext()，代码中的 <Ref<boolean>>是 ref 的类型，直接写即可。

在组件 Topnav 中 ↓

在组件 Doc 中 ↓

4. 这样两个子组件都获取到了 menuVisible 了
5. 现在我希望用户在点击示意图中的圆圈时（在项目中是 Topnav 里的一个元素 class=”logo”），显示/隐藏组件列表
6. 给点击的元素添加 @click="toggleMenu"，当用户点击的时候就调用这个 togglemenu 方法，然后 toggleMenu 就把 menuVisible 的值取反。

7. 在 Doc 组件里需要显示/隐藏的组件列表添加 v-if="menuVisible"。

8. 此时只要用户点击了 logo，v-if 后面的 menuVisible 的值也会变，比如原来是 false，点击后变成了 true ，就实现了显示/隐藏的切换功能。