vue3.0递归组件的使用

在Vue 3.0中，可以使用递归组件来表示树形结构或者是无限下拉菜单等。以下是一个简单的Vue 3.0递归组件示例，该组件用于显示一个简单的树形结构：

<template>
  <ul>
    <li v-for="(item, index) in treeData" :key="index">
      {{ item.name }}
      <RecursiveTree v-if="item.children && item.children.length > 0" :tree-data="item.children" />
    </li>
  </ul>
</template>
 
<script>
export default {
  name: 'RecursiveTree',
  props: {
    treeData: Array
  }
}
</script>

使用该组件时，你需要传递一个树形结构的数组作为treeData属性。每个数组元素都应该是一个对象，拥有name属性和可能的children属性，后者又是一个树形结构的数组。

以下是如何使用该组件的示例：

<template>
  <div>
    <RecursiveTree :tree-data="treeData" />
  </div>
</template>
 
<script>
import RecursiveTree from './RecursiveTree.vue';
 
export default {
  components: {
    RecursiveTree
  },
  data() {
    return {
      treeData: [
        {
          name: 'Node 1',
          children: [
            {
              name: 'Node 1.1',
              children: []
            },
            {
              name: 'Node 1.2',
              children: [
                {
                  name: 'Node 1.2.1',
                  children: []
                }
              ]
            }
          ]
        },
        {
          name: 'Node 2',
          children: []
        }
      ]
    };
  }
}
</script>

在这个例子中，RecursiveTree组件用于显示一个简单的树形结构，每个节点都是通过递归调用自身来显示其子节点的。递归调用停止的条件是节点没有子节点，或者子节点数组为空。