一、Props 声明
一个组件需要显式声明它所接受的 props，这样 Vue 才能知道外部传入的哪些是 props，哪些是透传 attribute
在使用SFC时，props 可以使用 defineProps() 宏来声明：
如子组件中
(1)
const props = defineProps(['foo'])
(2)
const props = defineProps({
title:String,
age:Number
})
(3)搭配ts 可使用类型标注
const props = defineProps<{
title:String,
age?:Number
}>()二、传递静态prop（只能是字符串）
父组件
<Cpn say-hello="Hello" />
子组件中
const props = defineProps<{
sayHello:String
}>注意：vue3官方文档中介绍，prop 与事件的名字也提供了自动的格式转换。
子组件中用camelCase 形式命名
但在父组件中可以使用 kebab-case 形式来监听。
与 prop 大小写格式一样，在模板中我们也推荐使用 kebab-case 形式来编写监听器。
即 addEvent 会自动解析为add-event 并且由于代码位置及风格匹配，提高了模板的可读性
官方推荐利用这种代码特性 来书写 prop 及事件
本文中即为：（sayHello 与say-hello）
三、传递非字符串类型，使用v-bind
如传递数组
<Cpn :names=['A','B','C']>
传递数字
<Cpn :num="24">
传递对象
<Cpn :author="{
name:'Asen',
age:'20'
}">你可以使用一个对象绑定多个prop并传递参数
const prop = {
name:'Asen',
age:'20'
}
模板中
<Cpn v-bind="prop">四、prop校验
在子组件中可以进行校验
const props = defineProps({
// 基础类型检查
// （给出 `null` 和 `undefined` 值则会跳过任何类型检查）
propA: Number,
// 多种可能的类型
propB: [String, Number],
// 必传，且为 String 类型
propC: {
type: String,
required: true
},
// Number 类型的默认值
propD: {
type: Number,
default: 100
},
// 对象类型的默认值
propE: {
type: Object,
// 对象或数组的默认值
// 必须从一个工厂函数返回。
// 该函数接收组件所接收到的原始 prop 作为参数。
default(rawProps) {
return { message: 'hello' }
}
},
// 自定义类型校验函数
propF: {
validator(value) {
// The value must match one of these strings
return ['success', 'warning', 'danger'].includes(value)
}
},
// 函数类型的默认值
propG: {
type: Function,
// 不像对象或数组的默认，这不是一个工厂函数。这会是一个用来作为默认值的函数
default() {
return 'Default function'
}
}
})五、单向数据流
子组件中不允许直接修改父组件传递过来的参数（会抛出错误）
如需修改，可以在子组件中先获取到传递过来的值以后再次进行修改
const props = defineProps({
name:"Asen"
})
const myname = ref(props.name)
此时再次修改myname 即可