vue withdefaults

作者：风外听竹发布日期:2025-04-22 浏览:89

// 使用 withDefaults 定义组件的默认 props

<script setup lang="ts">
import { defineProps } from 'vue'

interface Props {
  msg?: string
  count?: number
}

// 使用 withDefaults 设置默认值
const props = withDefaults(defineProps<Props>(), {
  msg: 'Hello World',
  count: 0
})
</script>

<template>
  <p>{{ msg }}</p>
  <p>Count: {{ count }}</p>
</template>

<style scoped>
p {
  font-size: 1.2em;
}
</style>

解释说明：

withDefaults 是 Vue 3 Composition API 中的一个函数，用于为组件的 props 设置默认值。
在这个例子中，我们定义了一个接口 Props 来描述 msg 和 count 这两个属性。
然后使用 withDefaults 函数为 msg 和 count 设置了默认值：msg 默认为 'Hello World'，count 默认为 0。
在模板中，我们直接使用了这些 props，并且它们会根据父组件传递的值或默认值进行渲染。

上一篇：vue点击子元素不触发父元素

下一篇：vue webpack配置