vue 里 props 类型为 Object 时设置 default: () =＞ {} 返回的是 undefined 而不是 {}？

这篇具有很好参考价值的文章主要介绍了vue 里 props 类型为 Object 时设置 default: () =＞ {} 返回的是 undefined 而不是 {}？。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

问题

今天遇到个小坑，就是 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>

vue 里 props 类型为 Object 时设置 default: () =＞ {} 返回的是 undefined 而不是 {}？,Vue 技术栈,vue.js
组件里添加下面代码：

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

发现 infoData 是 undefined

vue 里 props 类型为 Object 时设置 default: () =＞ {} 返回的是 undefined 而不是 {}？,Vue 技术栈,vue.js

解决

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

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

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

vue 里 props 类型为 Object 时设置 default: () =＞ {} 返回的是 undefined 而不是 {}？,Vue 技术栈,vue.js

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

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