Vue错误:无效的属性:属性“participants”的类型检查失败,应为Object,获取Array

mm9b1k5b  于 2023-05-18  发布在  Vue.js
关注(0)|答案(2)|浏览(246)

我正在尝试将数据从父组件传递到子组件。
父组件:

export default {
  props: {
    bordered: true,
    striped: true,
    participants:
        {
        primaryAlias : '',
        primaryEmail : '',
        primaryAddress : '',
        primaryPhone: '',
      }
  },

子组件:

export default {
  props: {
    participants: [
        {
      type: Object,
      value: ''
    },
  ]
  },

然而,我遇到了很多 prop 错误。当前我在子组件中收到错误:

Vue Error: Invalid prop: type check failed for prop "participants". Expected Object, got Array

然而,当我试图像这样纠正它时:

export default {
  props: {
    participants: [
        {
      type: Object,
      value: ''
    },
  ]
  },

在子组件中再次收到以下错误。

Invalid prop type: "[object Object]" is not a constructor

我试着重写了很多次,但似乎没有什么工作,很高兴听到提示。

ff29svar

ff29svar1#

更新如下然后希望解决问题
参与者为对象类型时:

export default {
      props: {
        participants:
            {
          type: Object,
          default: {}
        },
      },

参与者为数组类型时:

export default {
      props: {
        participants:
            {
          type: Array,
          default: []
        },
      },

您可以从here阅读更多内容

nafvub8i

nafvub8i2#

数组和对象应默认为函数(ESLint建议):

export default {
      props: {
        participants:
            {
          type: Array,
          default: () => []
        },
      },

export default {
      props: {
        participants:
            {
          type: Object,
          default: () => {}
        },
      },

相关问题