子组件

<!-- ChildComponent.vue -->
<template>
  <div>
    <h3>子组件</h3>
    <p>接收到的消息：{{ message }}</p>
    <p>接收到的数字：{{ count }}</p>
  </div></template>
  <script setup>// 定义 
  propsconst props = defineProps({  
  message: {    
    type: String,    
    required: true // 可选，根据需求设置
  },  
  count: {    
    type: Number,    
    default: 0 // 可选默认值
  }
});// 在模板中可以直接使用 props.message, props.count
</script>

父

<!-- ParentComponent.vue --><template>
  <div>
    <h2>父组件</h2>
    <ChildComponent 
      :message="'Hello from Parent'" 
      :count="42" 
    />
  </div>
  </template>
  <script setup>
  import ChildComponent from './ChildComponent.vue'
  </script>