用vue20封装一个树形导航栏

以下是一个简单的树形导航栏的Vue组件，使用了递归组件来实现。

<template>
  <ul>
    <li v-for="item in menu" :key="item.id">
      <a :href="item.url">{{ item.name }}</a>
      <tree-menu :menu="item.children" v-if="item.children" />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeMenu',
  props: {
    menu: {
      type: Array,
      default: () => []
    }
  }
}
</script>

这个组件接受一个名为menu的数组作为参数，每个元素都应该包含id、name和url属性。如果一个元素包含一个children属性，那么它将被认为是一个具有子菜单的菜单项，子菜单将被递归地渲染出来。

使用时，只需要将菜单数据传递给组件即可：

<template>
  <div>
    <tree-menu :menu="menu" />
  </div>
</template>

<script>
import TreeMenu from './TreeMenu.vue'

export default {
  components: {
    TreeMenu
  },
  data() {
    return {
      menu: [
        {
          id: 1,
          name: 'Home',
          url: '/'
        },
        {
          id: 2,
          name: 'Products',
          children: [
            {
              id: 3,
              name: 'Product 1',
              url: '/products/1'
            },
            {
              id: 4,
              name: 'Product 2',
              url: '/products/2'
            }
          ]
        },
        {
          id: 5,
          name: 'About',
          url: '/about'
        }
      ]
    }
  }
}
</script>

这将渲染出一个包含三个菜单项的树形导航栏。