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'}];