一、Props的声明

1. 在 object const props=defineProps({ name:String, //后面是它的类型，这是没有默认值的情况 age:Number }) const props=defineProps({ name:{ type:String, default:'kate' //有默认值的情况 } })

const props=defineProps<{ name:string age?:number //？代表有没有都可以，< >是一种generic的类型 }>()

二、在模板中使用

父组件定义要传给子组件的props
`  <FatherComponent :table-data='datas'/>  `
子组件接收
`  defineProps({
    tableData:Object,
    default:()=>{}
})  `
子组件模板中直接使用
`  <div>{{tableData}}</div>  `

三、单向数据流，不能改变props

`  const props = defineProps(['foo'])
    // ❌ warning, props are readonly!
    props.foo = 'bar'

` 在两种情况下，可以改变props

1. props被用来做为初始化的值
   

const props=defineProps(['initCounter']) const counter = ref(props.initCounter) 2. props被作为需要转换的原始值传入 const normalizedSize = computed(() => props.size.trim().toLowerCase())