前言

在Vue的组件之间进行传参，在子组件里赋值了默认值，但是在页面里读取不到。

贴一下原代码：

父组件

Student.vue是子组件，接收一个student的参数。

<Student :student="student" />

export default {
  import Student from './Student.vue'; // 引入子组件
  components: {
    Student
  },
  data() {
    return {
      student: {
        name: '小花'
      }
    }
  }
}

子组件

接收父组件传入的student，子组件的student有三个默认属性name、age、gender。

<!--子组件-->
<div>{{student.name}}</div>
<div>{{student.age}}</div>

export default{
  props: {
    studend: {
      type: Object,
      default() { // 给student默认值
        name: '小红',
        age: 22,
        gender: 'female'
      }
    }
  }
}

在子组件里输出student数据，想要输出student和student.age的值。

可以看到输出结果，student的值拿到了父组件传入的name属性，但是在子组件默认赋值的age并没有取到。

改进

难道是数据类型的问题，尝试换成string和array两种类型来尝试。

同样在子组件里添加两个接收参数str|String，arr|Number[]，分别赋值默认值：

然后就取到了。

解决方案

这样下来，就很明显了。父组件的赋值会覆盖默认值，所以默认的属性age和gender会被覆盖，所以是undefined。如果想要使用默认属性，可以使用对象扩展运算符(…)，合并当前对象。

可以看到在数据中可以读取到默认属性了。

主要是父组件的赋值会覆盖子组件的默认值，所以默认属性会是undefined。虽然是个小细节，但是使用的时候，如果不慎将对象视为对象扩展运算符做合并操作了，那么所以设置的默认属性值都会出问题。