Vue menu 递归组件

分享一个用递归的方式写 menu 组件

vue 利用递归组件写导航

• 为什么要用递归的方式写 ？

原因可以有几点： 大大简化了代码量，根据 JOSN 数据快速的渲染出 DOM 结构。不需要配置太多的参数。
缺点：因为使用 JSON 的方式传递了一整个数据，所有可扩展性不是很强。

• js 部分

• 调用 部分

 

  // JSON 数据  从后端取得数据
  munuData: [
    {
      id:1,
      name: '测试标题1',
      expand: false,
      children: [
        {
          id:2,
          name: '测试第一层子标题',
          expand: false,
          children: [
            {
              id: 3,
              name: '测试第二层子标题',
            }
          ]
        }
      ]
    },
    {
      id:4,
      name: '测试标题2',
      expand: false,
      children: [
        {
          id:5,
          name: '测试第一层子标题',
          expand: false,
          children: [
            {
              id: 6,
              name: '测试第二层子标题',
            }
          ]
        }
      ]
    }
  ]

• 最后生成的效果

menu.png

如果你有更好的写法或有什么疑问欢迎留言，如果想要源码欢迎留言或私信。