"Is not in camelCase" 当道具是从一个独特的对象单独生成时发出警告
"Is not in camelCase" warning when props are individually generated from a unique object
我将对象 configObject
作为 prop 传递给我的子组件:
<custom-button v-bind="configObject" />
此对象包含我在子组件中单独定义的各种属性,以便提取相应的值:
props: {
button_id: {
type: String,
default: ''
},
is_external_link: {
type: Boolean,
default: true
},
display_button: {
type: Boolean,
default: true
},
...
},
这很好用,但是 Vue
抱怨这些道具不在 camelCase 中。然而,如果我将它们重命名为驼峰式 (button_id
-> buttonId
),则数据不再传递,例如 buttonId
为空。
如何解决这个难题?
编辑:`configObject' 如下所示。
{
button_id: '123',
text: 'blabla',
link: 'https://google.com',
is_external_link: true,
image: 'https://cdn.image.jpg',
...
}
我不熟悉你用来传递道具的语法,但我的方法是这样的:
<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
}
},
我将对象 configObject
作为 prop 传递给我的子组件:
<custom-button v-bind="configObject" />
此对象包含我在子组件中单独定义的各种属性,以便提取相应的值:
props: {
button_id: {
type: String,
default: ''
},
is_external_link: {
type: Boolean,
default: true
},
display_button: {
type: Boolean,
default: true
},
...
},
这很好用,但是 Vue
抱怨这些道具不在 camelCase 中。然而,如果我将它们重命名为驼峰式 (button_id
-> buttonId
),则数据不再传递,例如 buttonId
为空。
如何解决这个难题?
编辑:`configObject' 如下所示。
{
button_id: '123',
text: 'blabla',
link: 'https://google.com',
is_external_link: true,
image: 'https://cdn.image.jpg',
...
}
我不熟悉你用来传递道具的语法,但我的方法是这样的:
<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
}
},