Vue3 定义和使用 Porps

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

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

// 定义 Props，在 setup 中props是自动解构的，不需要通过 props.title 来访问
defineProps({
  title: {
    // 定义 props 的数据类型
    type: string,
    // required 标明这个 prop 是必传的，属性是可选的，默认为 false，
    required: true,
    validator(value){
      // 自定义校验函数，返回 true 表示校验通过，返回 false 表示校验失败
      return ['success', 'warning', 'danger'].includes(value)
    }
  },
  description: {
    type: String,
    // 为 prop 提供默认值
    default: 'Default description'
  }
})
</script>