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

Question

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

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

在 mounted() 中，我尝试打印此道具：console.log(this.actionProps) Dev Tools 中的结果是：

{
  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'}" />

这意味着 prop 作为 string 传递。如果您想将其作为 object 发送，您应该将其更改为：

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

这样 Vue 就知道它是一个 JavaScript 对象而不是一个字符串。 Read More

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