vue 组件递归(组件自己调用自己)
vue 组件递归项目中,用到el-menu, 侧边栏导航动态加载时,需要用到组件递归,不然js写逻辑,有点繁琐。干货多,屁话少,上代码给组件name值export default {name: "submenu",// 必须给name值}直接在本组件中调用即可// 必须加v-if条件,否则调用会进入死循环,程序会崩<el-submenu v-if="menu.children &&a
·
vue 组件递归
项目中,用到 el-menu, 侧边栏导航动态加载时,需要用到组件递归,不然js写逻辑,有点繁琐。
干货多,屁话少,上代码
- 给组件name值
export default {
name: "submenu", // 必须给name值
}
- 直接在本组件中调用即可
// 必须加v-if条件,否则调用会进入死循环,程序会崩
<el-submenu v-if="menu.children && menu.children.length">
<submenu :menuData="menu.children"></submenu> // 只看这里就行, name值调用自己
</el-submenu>
<el-menu-item v-else>
</el-menu-item>
3、有同学私信我,说看不懂这段代码。简单说一下,上面的1和2 是一个页面的。简易代码如下
<template>
// 必须加v-if条件,否则调用会进入死循环,程序会崩
<el-submenu v-if="menu.children && menu.children.length"> // 这是element 下级子菜单的父级标签
<submenu :menu="menu.children"></submenu> // 只看这里就行, name值调用自己
</el-submenu>
<el-menu-item v-else> // 这是element 假如无下级子菜单的标签。
{{ menu.name }}// 里面复制内容看自己了 取值key看自己需求
</el-menu-item>
</template>
<script>
export default {
name: "submenu", // 必须给name值
props: {
menu: {
type: Object,
required: true,
}
}
</script>
更多推荐
已为社区贡献4条内容
所有评论(0)