记录使用Vue3实现侧边栏打开隐藏功能

在App.vue中声明menuVisible，然后provide出去，代码如下：

<script >
import {provide, ref} from 'vue'
import click from './components/click.vue'
import asides from './components/asides.vue'
export default {
  components: {click, asides},
  setup(){
    const menuVisible = ref(false)
    provide('xxx',menuVisible)
  }
}
</script>
<template>
<click/><asides/>
</template>

click.vue代码如下：

<template>
  <div>
    <header @click="toggleMenu">点我</header>
  </div>
</template>

<script>
import {inject} from 'vue';

export default {
  setup(){
    const menuVisible = inject('xxx');
    const toggleMenu = ()=>{
      menuVisible.value = !menuVisible.value;
    }
    return {toggleMenu}//记得要return
  }
};
</script>

asides.vue代码如下：

<template>
  <div>
    <aside v-if="menuVisible">
      <p>AAA</p>
      <p>BBB</p>
      <p>CCC</p>
    </aside>
  </div>
</template>

<script>
import {inject} from 'vue';

export default {
  setup(){
    const menuVisible = inject('xxx');
    return {menuVisible}
  }
};
</script>

即可实现页面中点击“点我”，打开/隐藏侧边栏的效果