?在 Vue 3 中，我们可以使用 Composition API 来编写组件，其中一个新特性是使用 defineProps 来定义 props。但是，在使用 defineProps 定义 props 时，如果没有给 props 赋默认值，那么在使用该组件时就必须给 props 传递值，否则会报错。那么，如何友好地给参数赋默认值呢？下面就来为大家介绍一些方法。
方法一：使用默认值语法
?在 defineProps 中，我们可以使用 ES6 的默认值语法来为 props 赋默认值，例如：
import { defineProps } from 'vue'
export default {
props: defineProps({
text: {
type: String,
default: 'Hello world!'
}
})
}
?在上述代码中，我们为 text 参数赋了默认值 “Hello world!”，这样在使用该组件时，如果没有传递 text 参数，就会使用默认值。
方法二：使用可选链语法
?在 Vue 3 中，我们还可以使用可选链语法来判断 props 是否存在以及是否有值，例如：
import { defineProps } from 'vue'
export default {
props: defineProps({
text: {
type: String
}
}),
setup(props){
const message = props.text?.trim() || 'Hello world!'
return {
message
}
}
}
?在上述代码中，我们使用了可选链语法来判断 props.text 是否存在以及是否有值，如果没有传递 text 参数，就会使用默认值 “Hello world!”。
方法三：使用计算属性
?在 Vue 3 中，我们还可以使用计算属性来为 props 赋默认值，例如：
import { defineProps } from 'vue'
export default {
props: defineProps({
text: {
type: String
}
}),
computed: {
message(){
return this.text || 'Hello world!'
}
}
}
?在上述代码中，我们使用计算属性来判断 props.text 是否存在以及是否有值，如果没有传递 text 参数，就会使用默认值 “Hello world!”。
?总的来说，在使用 defineProps 定义 props 时，给参数赋默认值的方法有很多种，可以根据自己的情况选择合适的方法。希望这篇文章能够对大家有所帮助。