vue3初体验-递归组件使用方法

以树状菜单为例

父组件

<TreeItem :data="data" />

type TreeList = {
  name: string;
  icon?: string;
  children?: 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",
  },
]);

子组件

在子组件处调用自身,需要加上终止条件,否则会导致内存泄漏

<div style="margin-left:10px;" class="tree">
    <div :key="index" v-for="(item,index) in data">
      <div @click='clickItem(item)'>{{item.name}}</div>
    </div>
    <TreeItem @on-click='clickItem' v-if='item?.children?.length' :data="item.children"></TreeItem>
</div>



type TreeList = {
  name: string;
  icon?: string;
  children?: TreeList[] | [];
};

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

defineProps<Props<TreeList>>();