VUE 页面使用 defineProps 如何友好的给参数赋默认值

在 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 时，给参数赋默认值的方法有很多种，可以根据自己的情况选择合适的方法。希望这篇文章能够对大家有所帮助。