vue3 props 中的对象 配置默认值

在Vue3中，`props`（属性）是用来从父组件向子组件传递数据的特性。当你定义一个接受对象类型的`prop`时，可以为该属性设置默认值，这样即使父组件没有传值，子组件也能使用预设的默认值。

例如，假设你有一个名为`user`的props，用来接收用户配置信息：

// 父组件
<template>
  <ChildComponent :user="defaultUser" />
</template>

<script>
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      defaultUser: { name: 'John Doe', email: 'john@example.com' }
    };
  }
};
</script>

在子组件`ChildComponent`中，你可以这样接收和使用`user`：

// 子组件 ChildComponent.vue
<template>
  <div>
    <p>Name: {{ user.name }}</p>
    <p>Email: {{ user.email }}</p>
  </div>
</template>

<script>
export default {
  props: {
    user: {
      type: Object,
      default: () => ({ name: 'Unknown', email: 'unknown@example.com' }) // 使用默认值
    }
  }
};
</script>

如果父组件没有提供`user`对象，子组件将使用`defaultUser`的默认值。如果你在子组件内部尝试访问未定义的属性，Vue会显示默认值，除非在访问前显式地使用`null`或`undefined`进行检查。