vue 子组件 分别被不一样的父组件使用，里面的接口数据也是不一样的，应该怎么渲染同一个html呢？ 提供复用性

Question

比如说一个卡片组件，在A父组件的时候接口数据渲染到html是{{item.name}}，在B组件里面的接口数据渲染到是{{list.user}} 怎么在同一个div里面展示这个数据呢

Answer 1

那就把字段也传给子组件。
比如两组不同数据

let arr1 = [{name: 'arr1'}, {name: 'arr-1'}];
let arr2 = [{user: 'arr2'}, {user: 'arr-2'}];

子组件里写
{{item[name]}}
其中name是父组件传递过去的，可以是name，也可以是user。具体按照实际需求来。

当然也可以对arr2做map操作。

let arr3 = arr2.map(el => {
    return {
        name: el.user
    }
});
console.log(arr3);
// [{name: 'arr2'}, {name: 'arr-2'}];

Answer 2

<slot>

Answer 3

说的不是很清晰的感觉，如果你是想父子都使用一个数据，那就父组件得到组件后用props传递给子组件让它调用就可以了啊

Answer 4

你是想父组件字段不一样，而子组件都能渲染吧。
那只能分开传props了。
比如

<template>
  <div>{{val}}</div>
</template>
// 
props: ['val']

假设子组件叫Item
一个父组件

<Item v-for="(item, index) in itemList" :val="item.name">

另一个父组件

<Item v-for="(list, index) in listArr" :val="list.user">