• In a recent project I did with Vue3, THERE was a feature that required me to click on a logo on a website to open up a sidebar, and click again to hide it

  • The methods I use are provide and inject

  • Here is the schematic diagram

steps

  1. Put a menuVisible variable in app.vue, which is a ref, a box with a value of false

  1. Mark menuVisible as available to all descendants, availableprovide()To flag (equivalent to set), the example flag is’ XXX ‘, whose value is menuVisible

  1. Now I have two subcomponents, one is Topnav and the other is Doc. Both of these components need to get menuVisible and can be usedinjext(), in the code<Ref<boolean>>Is the type of ref, so I can just write it.

↓ in component Topnav

↓ in the component Doc

  1. Both child components now get menuVisible
  2. Now I want the user to show/hide the list of components when clicking on the circle in the diagram (in this case, a Topnav element class=”logo”)
  3. Add to the clicked element@click="toggleMenu"When the user clicks, the toggleMenu method is called, and toggleMenu reverses menuVisible.

  1. Add a list of components that need to be shown/hidden in Doc componentsv-if="menuVisible".

  1. As soon as the user clicks on the logo,v-ifThe value of menuVisible will also change, for example, from false to true, to show/hide.