解决vue props传Array/Object类型值,子组件报错的情况

解决 Vue props 传 Array/Object 类型值，子组件报错的情况，可以通过以下几种方式来实现，具体步骤如下：

使用具体类型声明 Props

在声明组件的 props 时，可以使用具体类型来声明，例如：

props: {
  data: Array // 声明 Array 类型的 data Prop
}

这样可以确保子组件在接收到 props 时，会进行类型校验。但是如果传入的是一个 Object 类型的数据，依然会出现类型校验失败的情况，可以尝试下一步操作。

使用 v-bind 绑定 Props

使用 v-bind 可以将父组件的对象或数组作为动态的 props 传递给子组件。使用方法如下：

<template>
  <child-component :data="obj"></child-component>
</template>

<script>
export default {
  data() {
    return {
      obj: { name: '小明', age: 18 }
    }
  },
  components: {
    ChildComponent
  }
}
</script>

这里将 obj 对象作为 data prop 的值传递给了子组件。如果 obj 当中包含了 Array 类型的数据，子组件也可以正确地接收，并进行类型校验。

使用 JSON.stringify 转换 Props

如果使用 v-bind 传递 props 时，无法解决报错的情况，可以尝试使用 JSON.stringify 将对象或数组转换成字符串，在子组件中再将字符串转换成对象或数组。示例代码如下：

<template>
  <child-component :data="JSON.stringify(obj)"></child-component>
</template>

<script>
export default {
  data() {
    return {
      obj: { name: '小明', age: 18 }
    }
  },
  components: {
    ChildComponent
  }
}
</script>

这里将 obj 对象转换成了字符串，传递给了子组件。在子组件中可以使用 JSON.parse 将字符串转换成原本的数据类型。示例代码如下：

props: {
  data: String // 声明 String 类型的 data prop
},
data() {
  return {
    dataArray: []
  }
},
watch: {
  data(val) {
    this.dataArray = JSON.parse(val)
  }
}

以上三种方法都可以解决传递 Array/Object 类型的 props 时，子组件类型校验失败的问题。