vue 组件递归(组件自己调用自己)

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 :menuData="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值}
</script>

vue 组件递归(组件自己调用自己)相关推荐

vue的动画封装，vue的递归组件
在项目中,许多地方会使用到类似的动画,所以我们封装起来会好点,我们先创建一个组件,用来设置它的动画效果, <template><transition name="fade& ...
vue的递归组件以及三级菜单的制作
js里面有递归算法,同时,我们也可以利用props来实现vue模板的递归调用,但是前提是组件拥有 name 属性父组件:slotDemo.vue: <template><div&g ...
vue html模板递归,vue使用递归组件实现多级列表
一.背景需求在页面上渲染一个多级列表的时候,数据往往也具有多个层级例如:数组的每个元素都是一个对象,对象中的value可能是一个数组 { "ret": true, " ...
vue中递归组件实现多级列表
一.递归组件的概念递归组件: 递归组件简单来说在组件内使用组件本身.这个在vue的项目开发中也是比较常见的.对于一些多级的数据嵌套,如果对于每一层数据都进行for循环嵌套,那会非常繁琐,也很不方便. ...
vue 循环递归组件_全局组件实现递归树，避免循环引用
概述目录分类展示会通常要用到树形结构.本例结合vue的父子组件,采用递归渲染,实现一个基于树的curd小demo 知识点父子组件递归渲染 class 样式对象写法,CSS伪元素 ::before ...
vue 循环递归组件_Vue一个案例引发的递归组件的使用
今天我们继续使用 Vue 的撸我们的实战项目,只有在实战中我们才会领悟更多,光纸上谈兵然并卵,继上篇我们的<Vue一个案例引发的动态组件与全局事件绑定总结> 之后,今天来聊一聊我们如何在项 ...
利用递归组件实现一个简单的树组件（vue3）
1. 简言闲来无事不从容,睡觉东窗日已红. 万物静观皆自得,四时佳兴与认同. 最近学习vue3组件的时候实现了一个简单的树组件.话不多说,直接上代码. 2.效果这个数组件实现了展开.选中和选择三个 ...
vue组件如何自己调用自己（组件递归）
vue组件如何自己调用自己(组件递归) 在做侧边栏导航动态加载时,需要用到vue的组件递归,最开始打算直接写函数递归来解决问题,结果没什么卵用,越写越复杂.直接上代码给组件name值 <scr ...
[vue] vue中什么是递归组件？举个例子说明下？
[vue] vue中什么是递归组件?举个例子说明下? 组件自己调用自己,场景有用于生成树形结构菜单个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主 ...

vue 组件递归(组件自己调用自己)

vue 组件递归

vue 组件递归(组件自己调用自己)相关推荐

最新文章

热门文章