组件全局注册和递归调用

import { createApp } from 'vue'

import './style.css'

import App from './App.vue'

import SelfComponent from './study/selfComponent/component.vue'

const app = createApp(App)

app.component('SelfComponent', SelfComponent) // 注册全局组件

app.mount('#app')

 

<template>

<SelfComponent :mockData="mockData"></SelfComponent>

</template>

<script setup lang='ts'>

const mockData = [

  {

    id: 1,

    name: '张三',

    children: [

      {

        id: 11,

        name: '张三1'

      },

      {

        id: 12,

        name: '张三2'

      }

    ]

  },

  {

    id: 2,

    name: '李四'

  },

  {

    id: 3,

    name: '王五'

  }

]

</script>

<style scoped lang='scss'>

</style>

 

 

<template>

  <div>123</div>

  <div v-for="item in mockData" :key="item.id">

    <div>{{ item.name }}</div>

    <SelfComponent :mockData="item.children"></SelfComponent> // 递归调用,用同名组件即可,我这里是因为我注册了全局组件

  </div>

  </template>

 

  <script setup lang='ts'>

 

  defineProps<{

    mockData: {

      id: number

      name: string

      children?: {

        id: number

        name: string

      }[]

    }[]

  }>()

  </script>

 

  <style scoped lang='scss'>

 

  </style>