vue组件封装，求教

Question

通用组件：

<view v-for="(item,index) in list" :key="index">{{}}
</view>

父组件1：
list:[{name:123},{name:456}]

父组件2：
list:[{id:111},{id:222}]

两个页面中传到子组件的list中key不一样，我子组件应该如何取到父组件传过来的value值呢

Answer 1

方案1. 父组件把数据整理一下，按照要求传进去

// A.vue
<template>
    <view v-for="(item,index) in list" :key="index">
      {{item.name}}
    </view>
</template>
<script>
export default {
    props: ['list']
}
</script>

<template>
    <A :list="mappedList" />
</template>
<script>
export default {
    data: {
        list: [{id:111},{id:222}]
    },
    computed: {
        mappedList() {
            return this.list.map(i => ({name: i.id}));
        }
    }
}
</script>

方案2. 再增加一个参数告知通用组件该使用什么 key

// A.vue
<template>
    <view v-for="(item,index) in list" :key="index">
      {{item[field]}}
    </view>
</template>
<script>
export default {
    props: ['list', 'field']
}
</script>

<template>
    <A :list="list1" field="id"/>
    <A :list="list2" field="name"/>
</template>
<script>
export default {
    data: {
        list1: [{id:111},{id:222}],
        list2: [{name:111},{name:222}]
    }
}
</script>

Answer 2

首先我们需要明确问题，
1.key 用的是 index，数组长度都是 2，所以传递其实是一样的
2.如果是数据格式，推荐在 computed 里面统一掉

下面是简单的格式转换，没问题吧？

formatData(){
    return [{id:1}].concat([{name:2}]).map(item => return {
        code: item.id || item.name,
        ...item
    })
}

Answer 3

其实就看列表展示，你的key直接用index其实是没啥问题，也不需要特意处理。但是展示内容就不一样了，一个用name，一个用id，这样就需要处理一下了

// 封装的组件
props: {
    list: {
        type: Array,
        default: function() {
            return []
        }
    },
    formatKey: {
        type: String,
        default: ''
    },
    formatValue: {
        type: String,
        default: ''
    }
},
computed: {
    formatList() {
        const newList = this.list.map((item, index) => {
            return {
                uid: item[this.formatKey] || index,
                value: item[this.formatValue] || item.name,
                ...item
            }
        })
        return newList
    }
}


// 封装组件使用
<c-component list="dataList" format-key="id" />
<c-component list="dataList" format-value="name" />