-
最近我用 vue3 做的项目里，有一个功能需要我点击网站上的 logo 即可展开一个边栏，再次点击即可隐藏
-
我用的方法是 provide 和 inject
-
以下是示意图
步骤
- 在 App.vue 里放入一个 menuVisible 的变量，它是一个 ref ，理解成一个盒子，里面有个值为 false，用了 ref 就把该值变成了响应式，详细参考我这篇笔记 Vue3 中的ref
- 把 menuVisible 标记为所有后代都可以使用，可以用
provide()来标记（相当于 set），示例标记为 'xxx', 它的值为 menuVisible
- 然后我现在有两个子组件，一个是 Topnav ，一个是 Doc（这里我的 Doc 组件里引入了 Topnav 组件） ，这两个组件都需要获取 menuVisible，可以用
inject()，代码中的<Ref<boolean>>是 ref 的类型（Ref因为是类型，要大写，表明类型是 ref，里面的 boolean 表明 ref 的类型是布尔）。
在组件 Topnav 中 ↓
在组件 Doc 中 ↓
- 这样两个子组件都获取到了 menuVisible 了
- 现在我希望用户在点击示意图中的圆圈时（在项目中是 Topnav 里的一个元素 class="logo"），显示/隐藏组件列表
- 给点击的元素添加
@click="toggleMenu"，当用户点击的时候就调用这个 togglemenu 方法，然后 toggleMenu 就把 menuVisible 的值取反。
- 在 Doc 组件里需要显示/隐藏的组件列表添加
v-if="menuVisible"。
- 此时只要用户点击了 logo，
v-if后面的 menuVisible 的值也会变，比如原来是 false，点击后变成了 true ，就实现了显示/隐藏的切换功能。
