vue3子组件接收父组件值设置默认值

在 Vue3 中，可以使用 `props` 选项来定义子组件接收的属性，并且可以设置默认值。你可以在子组件的 `setup` 函数中使用 `props` 对象来访问这些属性。如果父组件没有传入该属性，则使用默认值。

以下是一个示例：

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

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    message: {
      type: String,
      default: 'Hello, World!'
    }
  },
  setup(props) {
    return {
      message: props.message
    }
  }
});
</script>

在上面的示例中，子组件定义了一个 `message` 属性，并设置了默认值为 `'Hello, World!'`。在 `setup` 函数中，通过 `props` 对象获取 `message` 属性，并将其作为 `setup` 函数的返回值。

这样，在父组件中，如果没有传入 `message` 属性，则子组件会使用默认值 `'Hello, World!'`。如果传入了 `message` 属性，则子组件会使用传入的值。例如：

<template>
  <div>
    <message-component></message-component>
    <message-component message="Hello, Vue3!"></message-component>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import MessageComponent from './MessageComponent.vue';

export default defineComponent({
  components: {
    MessageComponent
  }
});
</script>

在上面的示例中，父组件使用了两个 `message-component` 组件。第一个组件没有传入 `message` 属性，因此使用默认值 `'Hello, World!'`。第二个组件传入了 `message` 属性，因此使用传入的值 `'Hello, Vue3!'`。