如何解决当道具从一个独特的对象单独生成时,“不在驼峰式”警告
我将对象 configObject
作为道具传递给我的子组件:
<custom-button v-bind="configObject" />
该对象包含我在子组件中单独定义的各种属性,以便提取相应的值:
props: {
button_id: {
type: String,default: ''
},is_external_link: {
type: Boolean,default: true
},display_button: {
type: Boolean,...
},
这很完美,但是 Vue
抱怨这些道具不是驼峰式的。然而,如果我将它们重命名为驼峰式风格 (button_id
-> buttonId
),则数据不再传递,例如 buttonId
为空。
如何解决这个困境?
编辑:`configObject' 如下所示。
{
button_id: '123',text: 'blabla',link: 'https://google.com',is_external_link: true,image: 'https://cdn.image.jpg',...
}
解决方法
我不熟悉你用来传递 props 的语法,但我的方法是这样的:
<custom-button :config="configObject" />
props: {
config: {
type: Object,default: ()=>({...}) // give schema if you like.
},},data() {
return {
...this.config,otherKey: "other value",}
}
,
在以常规方式检索后,我最终从我的子组件直接访问了 prop 对象的属性 - configObject.property
:
props: {
configObject: {
type: Object,default: null
}
},
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。