当您不知道将有多少个嵌套JSON对象时，如何为每个级别的嵌套JSON对象生成Vue组件呢？

<template>
  <div>
    <div v-if="typeof data === 'object'">
      <div v-for="(value, key) in data" :key="key">
        <div v-if="Array.isArray(value)">
          <div v-for="(item, index) in value" :key="index">
            <recursive-component :data="item" />
          </div>
        </div>
        <div v-else-if="typeof value === 'object'">
          <recursive-component :data="value" />
        </div>
        <div v-else>
          {{ value }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RecursiveComponent',
  props: {
    data: {
      type: [Object, Array],
      required: true
    }
  },
  components: {
    RecursiveComponent: {
      // 递归调用当前组件
      extends: this
    }
  }
}
</script>

<template>
  <div>
    <recursive-component :data="jsonData" />
  </div>
</template>

<script>
import RecursiveComponent from './RecursiveComponent.vue'

export default {
  name: 'App',
  components: {
    RecursiveComponent
  },
  data() {
    return {
      jsonData: {
        // JSON对象的数据
      }
    }
  }
}
</script>