一文讲解VUE3 defineProps的使用

<script setup>
// 声明两个 Prop：title（字符串）、count（数字）
const props = defineProps(['title', 'count'])
</script>

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

<script setup>
const props = defineProps({
  // 基础类型校验（支持 String/Number/Boolean/Array/Object/Date/Function/Symbol）
  title: {
    type: String,       // 类型（可多个，如 [String, Number]）
    required: true,     // 是否必填
    default: 'Default Title' // 默认值（仅当 required: false 时有效）
  },
  // 引用类型默认值需用「工厂函数」返回（避免多实例共享同一引用）
  list: {
    type: Array,
    default: () => []   // 工厂函数返回新数组
  },
  // 自定义验证函数（返回 true 表示合法）
  status: {
    validator(value) {
      return ['active', 'inactive'].includes(value)
    }
  }
})
</script>

<script setup lang="ts">
// 声明 Props 类型（? 表示可选）
interface Props {
  title?: string
  count: number
  list?: string[]
}

// 用泛型传入类型
const props = defineProps<Props>()
</script>

<script setup lang="ts">
interface Props {
  title?: string
  count?: number
  list?: string[]
}

// withDefaults 接收 defineProps 的结果 + 默认值对象
const props = withDefaults(defineProps<Props>(), {
  title: 'Hello Vue',
  count: 0,
  list: () => ['a', 'b'] // 引用类型仍需工厂函数
})
</script>

<script setup>
const props = defineProps({ msg: String })
console.log(props.msg) // 响应式值（父组件修改时会更新）
</script>

<script setup>
import { toRefs, toRef } from 'vue'

const props = defineProps({ msg: String, count: Number })

// 正确：保持响应性
const { msg } = toRefs(props) 
const countRef = toRef(props, 'count') 

// 错误：直接解构会失去响应性
// const { msg, count } = props 
</script>

<!-- 父组件 -->
<script setup>
import { ref } from 'vue'
const parentMsg = ref('Hello from Parent')
</script>
<template>
  <Child :msg="parentMsg" />
  <button @click="parentMsg = 'Updated'">Change</button>
</template>

<!-- 子组件 -->
<script setup>
const props = defineProps({ msg: String })
</script>
<template>
  <p>{{ msg }}</p> <!-- 点击按钮后会更新为 "Updated" -->
</template>

<script setup>
defineProps(['title']) // 仅声明 title
</script>
<template>
  <!-- 未声明的 Prop（如 class、data-id）会自动绑定到 div -->
  <div class="box" data-id="123">{{ title }}</div>
</template>

<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs() // 包含所有透传 Attributes
</script>