javascript - 是什么导致 Vue props 等于 DOM 中的 [object Object]？

Question

在 Chrome 控制台中检查 Vue 应用程序的 DOM 时，我注意到有一个具有属性 content=[object Object] 的元素。 。在代码中，这是因为该组件将一个对象作为 content 传递。 prop 给它的 child ，由于某种原因，它出现在 DOM 中。

有问题的组件: <custom-component :content="obj" />

我检查了代码的其他区域，这些区域也将对象 Prop 传递给它们的 child ，并注意到 DOM 中缺少这些 Prop 。不幸的是，我找不到任何可能导致差异的显着差异。因为我也想隐藏 content=[object Object]从 DOM 中，我想知道 Vue 中的什么决定了这种行为？

我尝试重现 this jsfiddle 中的行为。然而，由于我的问题，我不知道如何正确地做到这一点，并且 content那里的 DOM 中缺少 prop。任何帮助将不胜感激。

Answer 1

这很可能是因为您尚未将其定义为相关组件上的 Prop 。如果它没有定义为 prop，那么它只会被转换为字符串并作为属性添加到组件的最外层元素。

如果您的组件确实定义了此属性，则检查其模板以查看是否将此属性添加到其最外层元素本身。如果它调用模板根部的其他组件，那么您同样需要检查该组件是否定义了此属性。