Vue Prop default()函数将Object作为字符串而不是Object返回

Question

我有一个组件，它定义了一个道具"actionOptions"；类型为Object。此外，这个道具定义了一个default()函数，该函数返回一个具有默认值的对象。

actionOptions: {
type: Object,
default: () => ({
columnLabel: 'Actions',
}),
},

在mounted()中，我尝试打印这个道具：console.log(this.actionProps)，开发工具中的结果是：

{
columnLabel: 'Actions',
}

警告：

Invalid prop: type check failed for prop "actionOptions". Expected Object, got String with value "{
columnLabel: 'Actions',
}"

出于某种原因，Vue将默认函数结果作为字符串返回，而不是执行它

我使用的是vue v^2.6.11。我在CodeSandbox.io上尝试了一个例子，它在那里很好。

感谢您的帮助。

Answer 1

您还没有共享在父级中调用此组件的代码，但此错误很可能发生在那里。我认为目前，您在父级中的代码如下所示：

<ChildComponent action-options="{columnLabel: 'Actions'}" />

这意味着道具将作为字符串传递。如果您想将其作为对象发送，您应该将其更改为：

<ChildComponent :action-options="{columnLabel: 'Actions'}" />

这样Vue就知道它是一个JavaScript对象，而不是字符串。阅读更多

如果这不能解决问题，请共享两个组件的其他部分。