<script setup>
// 聲明兩個(gè) Prop：title（字符串）、count（數(shù)字）
const props = defineProps(['title', 'count'])
</script>

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

<script setup>
const props = defineProps({
  // 基礎(chǔ)類型校驗(yàn)（支持 String/Number/Boolean/Array/Object/Date/Function/Symbol）
  title: {
    type: String,       // 類型（可多個(gè)，如 [String, Number]）
    required: true,     // 是否必填
    default: 'Default Title' // 默認(rèn)值（僅當(dāng) required: false 時(shí)有效）
  },
  // 引用類型默認(rèn)值需用「工廠函數(shù)」返回（避免多實(shí)例共享同一引用）
  list: {
    type: Array,
    default: () => []   // 工廠函數(shù)返回新數(shù)組
  },
  // 自定義驗(yàn)證函數(shù)（返回 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 的結(jié)果 + 默認(rèn)值對象
const props = withDefaults(defineProps<Props>(), {
  title: 'Hello Vue',
  count: 0,
  list: () => ['a', 'b'] // 引用類型仍需工廠函數(shù)
})
</script>

<script setup>
const props = defineProps({ msg: String })
console.log(props.msg) // 響應(yīng)式值（父組件修改時(shí)會(huì)更新）
</script>

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

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

// 正確：保持響應(yīng)性
const { msg } = toRefs(props) 
const countRef = toRef(props, 'count') 

// 錯(cuò)誤：直接解構(gòu)會(huì)失去響應(yīng)性
// 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> <!-- 點(diǎn)擊按鈕后會(huì)更新為 "Updated" -->
</template>

<script setup>
defineProps(['title']) // 僅聲明 title
</script>
<template>
  <!-- 未聲明的 Prop（如 class、data-id）會(huì)自動(dòng)綁定到 div -->
  <div class="box" data-id="123">{{ title }}</div>
</template>

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