Vue子组件修改父组件传递的props值属性

需求：父组件通过props传递给子组件 caseList 数组，这里需要遍历该数组来展示每个 case 元素的一些属性，其中就包括创建时间 create_time。但父组件传过来的 create_time 是一个时间戳，我们希望时间以年-月-日的形式来呈现。所以子组件需要想办法修改 props 值的一个属性。

一、使用计算属性

在 computed 中获取到 props，并通过 map 遍历数组来修改属性。

// 子组件
<template>
	<ul>
        <li v-for="(item, index) in newCaseList" :key="index">
            <div class="img">
                <img :src="item.cover" alt="" />
        	</div>
            <div class="text">{{ item.title }}</div>
            <div class="time">{{ item.create_time }}</div>
        </li>
	</ul>
</template>

<script>
    export default {
        props: {
            caseList: {
                type: Array,
                default: [],
            },
        },
        computed: {
            newCaseList() {
                return this.caseList.map((item) => {
                    item.create_time = this.format(item.create_time); //通过自定义format函数转换时间戳格式
                    return item;
                });
            },
        },
    };
</script>

这就是我在项目中所采用的做法。而除了计算属性，还可以通过监听属性或 sync 修饰符来修改 props。以下只简单说明用法。

二、使用监听属性

在子组件data中拷贝一份，注意引用类型需要深拷贝，根据需求可以watch监听。

data() {
    return {
        newCaseList: this.list.slice()
    }
},
watch: {
    list(caseList) {
        this.newCaseList = caseList
    }
}

三、使用 sync 修饰符

父组件传入 props时加入.sync 修饰符，子组件通过 this.$emit('update:xxx', params);修改。

// 父组件
<todo-list :list.sync="list" />
 
// 子组件
methodName(index) {
    this.$emit('update:list', this.newList)
}