如何在vuejs中针对表的不同元素在子组件中以不同的方式显示数据？

data() {
  return {
    tableData: [
      { type: 'text', value: 'Hello World' },
      { type: 'image', value: 'https://example.com/image.jpg' },
      { type: 'video', value: 'https://example.com/video.mp4' }
    ]
  };
}

<table>
  <tbody>
    <tr v-for="item in tableData" :key="item.value">
      <td>
        <component :is="getComponentName(item.type)" :data="item.value"></component>
      </td>
    </tr>
  </tbody>
</table>

methods: {
  getComponentName(type) {
    switch (type) {
      case 'text':
        return 'TextComponent';
      case 'image':
        return 'ImageComponent';
      case 'video':
        return 'VideoComponent';
      default:
        return 'FallbackComponent';
    }
  }
}

<template>
  <div>
    <!-- 根据类型以不同的方式显示数据 -->
    <div v-if="type === 'text'">{{ data }}</div>
    <img v-if="type === 'image'" :src="data" alt="Image">
    <video v-if="type === 'video'" :src="data" controls></video>
  </div>
</template>

<script>
export default {
  props: {
    type: String,
    data: {
      type: [String, Object]
    }
  }
};
</script>