"Is not in camelCase" 当道具是从一个独特的对象单独生成时发出警告

Question

我将对象 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',
  ...
}

Answer 1

我不熟悉你用来传递道具的语法，但我的方法是这样的：

<custom-button :config="configObject" />

props: {
  config: {
    type: Object,
    default: ()=>({...}) // give schema if you like.
  },
},
data() {
  return {
    ...this.config,
    otherKey: "other value",
  }
}

Answer 2

我最终从我的子组件直接访问了 prop 对象的属性 - configObject.property，在以常规方式检索它之后：

props: {
  configObject: {
    type: Object,
    default: null
  }
},

"Is not in camelCase" 当道具是从一个独特的对象单独生成时发出警告

"Is not in camelCase" warning when props are individually generated from a unique object

vue.js

prop