用vue3写一个递归方法

以下是一个使用Vue3编写的递归方法示例：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
        <ul v-if="item.children && item.children.length > 0">
          <recursive :items="item.children" />
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Recursive',
  props: {
    items: {
      type: Array,
      required: true,
    },
  },
});
</script>

在上述代码中，我们定义了一个递归组件`Recursive`，该组件接受一个`items`属性作为数据源。在组件的模板中，我们使用`v-for`指令遍历`items`数组，并将其渲染为一个无序列表。如果当前项有子项（即`item.children`存在且不为空），则再次渲染`Recursive`组件，并将子项数组作为`items`属性传递给它。

这样，我们就可以使用递归方法来无限嵌套渲染列表，直到没有子项为止。