使用vue编写多级菜单组件

下面是一个简单的多级菜单组件的代码示例，使用Vue编写：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in menu" :key="index">
        <a :href="item.link">{{ item.name }}</a>
        <multi-menu :menu="item.children" v-if="item.children"></multi-menu>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'MultiMenu',
  props: {
    menu: {
      type: Array,
      required: true
    }
  }
}
</script>

该组件使用递归的方式来渲染多级菜单。当一个菜单项有子菜单时，会创建一个新的 multi-menu 组件，并将子菜单传递给它。这样就可以不断地嵌套下去，直到所有的菜单都被渲染出来。

在这个组件中，菜单项的数据是通过 menu 属性传递进来的。这个属性是一个数组，每个元素代表一个菜单项，包含以下属性：

• name: 菜单项的名称
• link: 菜单项的链接
• children: 子菜单项，也是一个包含相同属性的数组

在渲染菜单时，使用 v-for 指令遍历 menu 数组，将每个菜单项渲染成一个 li 元素，如果该菜单项有子菜单，则创建一个新的 multi-menu 组件，并将子菜单传递给它。这样就可以实现多级菜单的渲染。