vu e父子组件传值默认值

### Vue 父子组件传值中的默认值设置

在 Vue 中，父子组件之间的通信可以通过 `props` 和 `$emit` 实现。当定义 `props` 接收父组件的数据时，可以为其设定默认值。

#### 定义 Props 并设置默认值

对于简单的默认值设置，在定义 `props` 的时候可以直接指定：

export default {
  props: {
    toChild: {
      type: String,
      default: "default value"
    }
  }
}

如果需要更复杂的逻辑来决定默认值，则可以在 `default` 字段提供一个函数[^3]。

let props = defineProps({
  to_child: {
    type: Object,
    default: () => ({
      key: 'value'
    })
  },
  message: {
    type: String,
    default: () => 'Hello from child component!'
  }
});

这样做的好处是可以确保每次创建新实例时都获得独立的对象副本而不是共享同一个对象。

#### 使用场景举例

假设有一个子组件 `<child-component>` 需要从父组件接收一些配置项作为初始状态，但这些配置项并非总是由父级提供。此时就可以利用上述方式为未提供的属性赋予合理的默认值。

<template>
  <div>{{ message }}</div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  message: {
    type: String,
    default: 'Default Message'
  }
})
</script>

在这个例子中，如果没有来自父组件的消息传递给 `message` 属性，默认会显示 `"Default Message"`[^4]。