\ 当我们在 Vue 中使用组件时，我们经常使用属性或道具将自定义的数据块向下传递给子组件。例如，我们可以告诉我们的子组件，对于这个版本的组件，“name”被设置为“my-component”：
\
<Component name="my-component" />
\ 如果我们尝试在没有name属性的情况下调用这个组件，它会在代码中返回undefined ，或者在 HTML 中呈现时就像没有文本一样。假设我们的Component看起来像这样：
\
<script> export default { props: { name: String }, mounted() { console.log(this.name); } } </script> <template> <p> Hi </p> </template>
\ 我们的组件所做的只是定义了一个名为name类型的属性String ，并且控制台记录了这个属性。它还以Hi 的形式显示它。这里唯一的问题是，如果在调用组件时未定义name ，则不会给出默认名称。
\
如何使用 Options API 在 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 相同的语法。
\ 定义一个没有默认值的道具看起来像这样：
\
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>
也在这里发布
原文： https://hackernoon.com/how-to-set-default-value-of-props-in-vue?source=rss