vue props 默认值

作者：视同仁寤戬发布日期:2025-10-10 浏览:63

// 定义一个 Vue 组件，使用 props 并设置默认值

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    // 定义一个名为 message 的 prop，并为其设置默认值
    message: {
      type: String,
      default: 'Hello, Vue!'
    }
  }
}
</script>

<!-- 解释说明：
1. `props` 是 Vue 组件接收外部传入数据的方式。
2. 在 `props` 中定义了一个名为 `message` 的属性，类型为字符串（String）。
3. 使用 `default` 关键字为 `message` 设置了默认值 'Hello, Vue!'。
4. 如果父组件没有传递 `message` 属性，那么该组件将使用默认值 'Hello, Vue!'。
5. 如果父组件传递了 `message` 属性，则会覆盖默认值，显示父组件传递的内容。 -->

上一篇：vue3 ref原理

下一篇：vue点击事件阻止冒泡