Vue.js：将对象作为道具传递，然后将其属性用作子组件中的属性

我正试着这么做。这似乎微不足道，但却不起作用

在父组件中，我实例化子EndpointDetailsForm组件，并将settingsDetails属性传递给它，如下所示：

<EndpointDetailsForm :endpointDetails="modalDetails.content" />

    props: {
        endpointDetails: {
            type: Object
        }
    }

<b-form-input id="nameInput"
              type="text"
              v-model="form.name"
              :placeholder="endpointDetails.name">
</b-form-input>

并尝试将其各种属性用作属性，如下所示：

<EndpointDetailsForm :endpointDetails="modalDetails.content" />

    props: {
        endpointDetails: {
            type: Object
        }
    }

<b-form-input id="nameInput"
              type="text"
              v-model="form.name"
              :placeholder="endpointDetails.name">
</b-form-input>

当我检查EndpointDetailsForm组件时，它将endpointDetails显示为一个道具，但当我检查上面的输入时，它告诉我占位符为null

---

我遗漏了什么？

在模板中，您必须使用烤肉串外壳属性。要使用骆驼套道具：

HTML属性名称不区分大小写，因此浏览器会将任何大写字符解释为小写。这意味着在DOM模板中使用camelCased道具名称时，需要使用它们的串格（以连字符分隔）等价物

因此，如果您的道具名为

endpointDetails

，则应将其作为属性引用为

endpointDetails

。因此：

代码示例：

Vue.component（'b-form-input'{
模板：“#b-form-input”，
道具：{
占位符：字符串，
},
});
Vue.component（'EndpointTailsForm'{
模板：“#EndpointDetailsForm”，
道具：{
//Vue将烤肉串外壳转换为camelCase。
端点详细信息：{
类型：对象
},
},
});
新Vue({
el:“#应用程序”，
数据：{
内容：{
名称：“我的占位符”，
},
},
});

您通过了名为
settingsdeails
的道具，但在组件中，您使用
endpointDetails
访问道具。对不起，我复制粘贴了错误的组件，正在修复。在原始帖子中修复了它。这不是问题所在。
modalDetails
是异步获取的吗？不是为了此组件。您建议的更改只是传递
？我已经做到了，这似乎没有什么区别。嗯，那么在
modalDetails
中可能有一些东西，甚至是你的应用程序代码中的其他东西，你没有在你的问题中显示出来。事实上，就像我用camelCase做的那样，当我检查endpointDetails表单时，它的道具有endpointDetails对象，所以它得到了它。烤肉串的情况下，它的道具是空的。哇，可怕的…一些非常奇怪的事情似乎发生在您的项目！