Vue 2.6.11中Prop的default函数返回字符串而非对象的问题求助

这种情况我之前也碰到过，大概率是父组件传递actionOptions这个prop的方式出错了，和你组件内部的prop定义关系不大，咱们一步步排查：

最常见的原因：传递prop时未使用v-bind #

Vue模板里，如果直接写actionOptions="{ columnLabel: 'Actions' }"，Vue会把引号里的内容当成字符串字面量传递，而不是解析成对象——这就是警告里说“Expected Object, got String”的核心原因。

错误写法： #

<!-- 这里传递的是字符串 "{ columnLabel: 'Actions' }"，不是对象 -->
<YourComponent actionOptions="{ columnLabel: 'Actions' }" />

正确写法： #

如果你需要自定义actionOptions的值，必须用v-bind（或简写:）来绑定对象：

<!-- 用v-bind告诉Vue解析引号内的内容为JS表达式 -->
<YourComponent :actionOptions="{ columnLabel: 'Custom Actions' }" />

如果不需要自定义值，完全可以不传递这个prop，Vue会自动执行你定义的default函数，使用默认值：

<YourComponent />

其他可能的排查点 #

1. 检查prop名称拼写：你在mounted里打印的是this.actionProps，但组件定义的prop是actionOptions——这可能是笔误？如果父组件传递时也写错了名称，也可能导致意外的传递结果，但从警告信息来看，目标prop是actionOptions，所以大概率是传递方式的问题。
2. 排查是否有其他代码覆盖prop值：比如通过$attrs、动态props或者其他逻辑，不小心把字符串类型的值赋值给了actionOptions。

为什么CodeSandbox里能正常运行？ #

大概率是你在CodeSandbox的示例中，要么正确使用了v-bind传递对象，要么根本没传递actionOptions，触发了组件内部的default函数，所以没有出现类型错误。

你可以先检查父组件的传递代码，把错误的写法改成带v-bind的形式，应该就能解决这个警告，同时让default函数正常执行了。

内容的提问来源于stack exchange，提问作者Bill