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

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 组件；

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

在C组件定义一个变量来分区，标签通过v-if判断。

props 传入key

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

以components引入已经实现了复用，你的props。

如果希望简洁点，可以多传入一个type,C组件根据props的type值进行展示。不想处理html，c页面中可以使用计算属性，根据不同的type处理。

其他没了
 

 props: {
    data: {
      type: Object,
      default: _ => {
        return {}
      }
    },
    type:{}
}

如果对您有帮助，请你点赞 + 采纳，这是对我最大的鼓励

您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632