共计 1241 个字符，预计需要花费 4 分钟才能阅读完成。
可收缩多级菜单的实现
1、递归组件实战
通过 v -show 来切换 re-menu 和 icon 组件的显示隐藏,re-menu 组件上几个课时有事例
<template>
<div class=”side-menu-wrapper”>
<slot></slot>
<Menu v-show=”!collapsed” width=”auto” theme=”dark” @on-select=”handleSelect”>
<template v-for=”item in list”>
<re-submenu
v-if=”item.children”
:key=”`menu_${item.name}`”
:name=”item.name”
:parent=”item”
>
</re-submenu>
<menu-item v-else :key=”`menu_${item.name}`” :name=”item.name”>
<Icon :type=”item.icon” />
{{item.title}}
</menu-item>
</template>
</Menu>
<div v-show=”collapsed” class=”drop-wrapper”>
<template v-for=”item in list”>
<re-dropdown @on-select=”handleSelect” v-if=”item.children” :show-title=”false” icon-color=”#fff” :key=”`drop_${item.name}`” :parent=”item”></re-dropdown>
<Tooltip v-else transfer :content=”item.title” placement=”right” :key=”`drop_${item.name}`”>
<span @click=”handleClick(item.name)” class=”drop-menu-span”>
<Icon :type=”item.icon” color=”#fff” :size=”20″></Icon>
</span>
</Tooltip>
</template>
</div>
</div>
</template>
2、v-if 和 v -show 对比
**v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。**
v-if 直接从代码中删除了，v-show 只是通过 display 来切换状态，因此建议频繁切换的话用 v -show 比较好
