问题

今天遇到个小坑，就是 vue 里使用 props 传参类型为 Object 的时候设置 default: () => {} 报错，具体代码如下

<template>
    <div class="pre-archive-info">
       <template v-if="infoData.kaimo !== null">{{ infoData.kaimo }}</template>
    </div>
</template>

<script>
export default {
    name: "PreArchiveInfo",
    props: {
        infoData: {
            type: Object,
            default: () => {}
        }
    }
};
</script>

组件里添加下面代码：

infoData:{{ infoData }} type:{{ typeof infoData }}

发现 infoData 是 undefined

解决

之前我的写法如下，这种是可以的。

<script>
export default {
    name: "PreArchiveInfo",
    props: {
        infoData: {
            type: Object,
            default: () => {
				return {};
			}
        }
    }
};
</script>

下面我们可以尝试问问 chatgpt 看看怎么说：

我试了一下 default: () => ({}) 这种写法是可以的

<script>
export default {
    name: "PreArchiveInfo",
    props: {
        infoData: {
            type: Object,
            default: () => ({})
        }
    }
};
</script>

default: () => ({}) 跟 default: () => {} 有什么区别？

default: () => {} 这样写会被解析器认为是一个代码块，而不是一个对象字面量。因此，如果我们想返回一个空对象，应该在空对象字面量周围加上括号，使其变成一个对象字面量表达式：default: () => ({})