如何在 Vue 中为 Props 赋予默认值

Posted on by

当我们在Vue中使用组件时，我们经常使用属性或道具将自定义的数据块向下传递给子组件。例如，我们可以告诉我们的子组件，对于这个版本的组件，“name”被设置为“my-component”：

<Component name="my-component" />

如果我们尝试在没有nameprops 的情况下调用这个组件，它会undefined在代码中返回，或者在 HTML 中呈现时就像没有文本一样。假设我们的Component外观是这样的：

<script>
export default {
    props: {
        name: String
    },
    mounted() {
        console.log(this.name);
    }
}
</script>

<template>
    <p>
        Hi 
    </p>
</template>

我们的组件所做的只是定义了一个名为nametype的 prop String，控制台会记录这个属性。它还在表单中显示它Hi 。这里唯一的问题是，如果name在调用组件时未定义，则没有给出默认名称。

在 Vue 中设置默认属性值#

在 Vue 中设置默认属性值很容易。如果您使用的是Options API，那么就像将我们的属性扩展到一个对象一样简单。例如，如果我们希望我们name的默认值是“ there ”，那么我们将我们的 prop 更新为如下所示：

export default {
    props: {
        name: {
            type: String,
            default: "there"
        }
    },
    mounted() {
        console.log(this.name);
    }
}

现在，如果没有给出名字，消息会简单地说“你好”

在 Composition API 中设置默认道具值#

在组合 API 中，定义道具使用该defineProps函数。此函数遵循与 Options API 上定义的 props 相同的语法。定义没有默认值的 prop 如下所示：

import { defineProps } from 'vue';
  
const props = defineProps({
    name: String
});

然后添加一个默认值，我们扩展name为有一个默认属性，就像以前一样：

import { defineProps } from 'vue';
  
const props = defineProps({
    name: {
        type: String,
        default: "there"
    }
});

在 Vue 中根据需要设置一个 Prop#

为了避免需要在属性上设置默认值，我们可以通过使用required字段来强制要求属性。例如，如果我们想要name定义我们的属性，我们只需设置required为true：

<script setup>
import { defineProps } from 'vue';
  
const props = defineProps({
    name: {
        type: String,
        required: true
    }
});
</script>

推荐阅读：