vue defineprops

作者：索伦之刃发布日期:2025-05-11 浏览:89

<script setup>
// 使用 defineProps 来定义 props
const props = defineProps({
  title: {
    type: String,
    required: true
  },
  description: {
    type: String,
    default: '默认描述'
  }
})
</script>

<template>
  <div>
    <h1>{{ props.title }}</h1>
    <p>{{ props.description }}</p>
  </div>
</template>

<style scoped>
/* 样式部分可以根据需要添加 */
</style>

解释说明：

defineProps 是 Vue 3 中 <script setup> 语法糖中的一个编译宏，用于定义组件的 props。
在上面的例子中，我们定义了两个 props：title 和 description。
- title 是一个必需的字符串类型。
- description 是一个可选的字符串类型，默认值为 '默认描述'。
在模板中，我们可以直接通过 props 对象来访问这些属性。

上一篇：vue安装教程

下一篇：vue跳转到新页面