vue3 defineprops默认值

在Vue3中，我们可以使用defineProps来定义一个组件的props，它可以接收一个对象参数，该对象参数包含了组件中所需要的props属性和对应的类型。

在这个对象参数中，我们可以为props指定默认值，例如： ```javascript

import { defineComponent, defineProps } from 'vue' const MyComponent = defineComponent({ props: { msg: { type: String,

default: 'Hello, World!' } },

template: '

在上面的代码中，我们为msg这个prop指定了默认值为'Hello, World!'，这意味着当我们不传入msg这个prop时，组件将会显示'Hello, World!'。

需要注意的是，如果我们使用的是Typescript，那么我们可以在props对象中使用可选属性符号?来表示这个prop是可选的，并且

- 1 -

在组件内部使用默认值时需要使用可选链符号(?)，例如： ```typescript

import { defineComponent, defineProps } from 'vue' interface Props { msg?: string }

const MyComponent = defineComponent({ props: { msg: { type: String,

default: 'Hello, World!' } },

template: '

在上面的代码中，我们使用了可选属性符号?来表示msg这个prop是可选的，因此在组件内部使用msg时需要使用可选链符号(?)来避免编译错误。

- 2 -