"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
  }
},