VUE中，A组件和B组件同时引用C组件，但传入数据的字段不同，请问如何复用C组件？

Question

A组件：

<template>
  <div>
    <test3 :data="testData1"></test3>
  </div>
</template>

<script>
import Test3 from './test3'

export default {
  name: 'Test1',
  components: {
    Test3
  },
  data() {
    return {
      testData1: {
        title: 'test1',
        list: [
          { id: 1, name: '张三', age: 10 },
          { id: 2, name: '李四', age: 11 },
          { id: 3, name: '王五', age: 12 }
        ]
      }
    }
  }
}
</script>

B组件：

<template>
  <div>
    <test3 :data="testData2"></test3>
  </div>
</template>

<script>
import Test3 from './test3'

export default {
  name: 'Test2',
  components: {
    Test3
  },
  data() {
    return {
      testData2: {
        name: 'test2',
        list: [
          { id: 1, hobby: '游戏', duration: 2 },
          { id: 2, hobby: '动漫', duration: 1 },
          { id: 3, hobby: '小说', duration: 4 }
        ]
      }
    }
  }
}
</script>

C组件：

<template>
  <div>
    <div>
      <h1>
        在 A 组件调用时 这里想渲染 title
        在 B 组件调用时 这里想渲染 name
      </h1>
      <ul>
        <li v-for="item in data.list" :key="item.id">
          在 A 组件调用时 这里想渲染 name 和 age
          <p>{{ item.name }} : {{ item.age }}</p>
          在 B 组件调用时 这里想渲染 hobby 和 duration
          <p>{{ item.hobby }} : {{ item.duration }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Test3',
  props: {
    data: {
      type: Object,
      default: _ => {
        return {}
      }
    }
  }
}
</script>

• 已经尝试使用 v-if 对字段进行判断；
• 已经尝试将 A 组件和 B 组件不同的 key 作为变量传入 C 组件；

Answer 1

使用具名插槽，用一个变量区分不同的插槽