vue写一个简单的树形菜单组件

好的，以下是一个简单的树形菜单组件的 Vue 代码：

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

<script>
export default {
  name: "TreeMenu",
  props: {
    menu: {
      type: Array,
      required: true,
    },
  },
};
</script>

在这个代码中，我们定义了一个 `TreeMenu` 组件，它接收一个 `menu` 数组作为 props，这个数组中存储了树形菜单的数据。在组件的模板中，我们使用 `v-for` 遍历 `menu` 数组，渲染每个菜单项，如果这个菜单项有子菜单，就递归地渲染子菜单，直到所有的子菜单都被渲染出来。

当然，这只是一个简单的示例，实际的树形菜单组件可能会更加复杂，需要更多的功能和交互。但是这个代码可以作为一个起点，帮助你开始编写自己的树形菜单组件。