如何为具有相同结构的不同JSON文件创建一个组件

<template>
  <div>
    <component :is="currentComponent" :data="jsonData" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: '', // 当前要渲染的组件名
      jsonData: {}, // JSON 数据
    };
  },
  mounted() {
    // 根据不同的 JSON 文件设置要渲染的组件
    this.loadJsonData('example.json');
  },
  methods: {
    loadJsonData(jsonFile) {
      // 使用 AJAX 或其他方式加载 JSON 数据
      // 这里假设使用 axios 来加载 JSON 文件
      axios.get(jsonFile)
        .then(response => {
          this.jsonData = response.data;
          this.currentComponent = this.getComponentName(response.data); // 获取要渲染的组件名
        })
        .catch(error => {
          console.error(error);
        });
    },
    getComponentName(jsonData) {
      // 根据 JSON 数据的内容来返回对应的组件名
      // 这里可以根据具体需求进行逻辑处理
      if (jsonData.type === 'type1') {
        return 'Component1';
      } else if (jsonData.type === 'type2') {
        return 'Component2';
      } else {
        return 'DefaultComponent';
      }
    },
  },
};
</script>

// Component1.vue
<template>
  <div>
    <!-- 这里根据具体需求渲染 JSON 数据的内容 -->
    <h1>{{ data.title }}</h1>
    <p>{{ data.description }}</p>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      required: true,
    },
  },
};
</script>

// Component2.vue
<template>
  <div>
    <!-- 这里根据具体需求渲染 JSON 数据的内容 -->
    <h2>{{ data.name }}</h2>
    <span>{{ data.date }}</span>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      required: true,
    },
  },
};
</script>

// DefaultComponent.vue
<template>
  <div>
    <p>No component found.</p>
  </div>
</template>