defineprops vue3

作者：冫LOVE灬丶棒棒发布日期:2026-02-22 浏览:37

// 使用 defineProps 定义 Vue 3 组件的 props

<script setup>
import { defineProps } from 'vue';

// 定义 props
const props = defineProps({
  title: {
    type: String,
    required: true
  },
  count: {
    type: Number,
    default: 0
  }
});
</script>

<template>
  <div>
    <h1>{{ props.title }}</h1>
    <p>Count: {{ props.count }}</p>
  </div>
</template>

<style scoped>
/* 样式代码 */
</style>

解释说明：

defineProps 是 Vue 3 <script setup> 语法糖中用于定义组件 props 的函数。
在上面的示例中，我们定义了两个 props：title 和 count。title 是一个必需的字符串类型，而 count 是一个可选的数字类型，默认值为 0。
在模板中，我们可以通过 props 对象来访问这些属性，并将它们渲染到页面上。

上一篇：layui vue

下一篇：vue开发