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

vue 组件递归

项目中，用到 el-menu， 侧边栏导航动态加载时，需要用到组件递归，不然js写逻辑，有点繁琐。

干货多，屁话少，上代码

1. 给组件name值

export default {
  name: "submenu",  // 必须给name值
}

2. 直接在本组件中调用即可

// 必须加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>