Vue 3.x 递归组件 复用自身

Question

在父组件配置数据结构，数组对象格式，传给子组件

type TreeList = {
  name: string,
  icon?: string,
  chiildren?: TreeList[] | []
}

const data = reactive<TreeList[]>([
  {
    name: "no.1",
    children: [
      {
        name: "no.1-1",
        children: [
          {
            name: "no.1-1-1",
          },
        ],
      },
    ],
  },
  {
    name: "no.2",
    children: [
      {
        name: "no.2-1",
      },
    ],
  },
  {
    name: "no.3",
  },
]);

子组件接收值

TreeItem 其实就是当前组件，通过 import 把自身又引入了一遍（或者通过导出自身组件名），如果他没有 children 了就结束。

<template>
<div style="margin-left:10px;" class="tree">
  <div :key="index" v-for="(item,index) in data">
    <div @click.stop='clickItem(item)'>{{item.name}}
  </div>
    <TreeItem @on-click='clickItem' v-if='item?.children?.length' :data="item.children"></TreeItem>
  </div>
  </div>
</template>
<script lang="ts" setup>
  type TreeList = {
    name: string;
    icon?: string;
    children?: TreeList[] | [];
  };

  type Props<T> = {
    data?: T[] | [];
  };

  defineProps<Props<TreeList>>(); 
</script>
<script>
export default {
  name: "TreeItem" // 对外暴露一个 name
}
</script>