一、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()

二、传递静态prop（只能是字符串）

父组件子组件中const props = defineProps

注意：vue3官方文档中介绍，prop 与事件的名字也提供了自动的格式转换。
子组件中用camelCase 形式命名
但在父组件中可以使用 kebab-case 形式来监听。
与 prop 大小写格式一样，在模板中我们也推荐使用 kebab-case 形式来编写监听器。
即 addEvent 会自动解析为add-event 并且由于代码位置及风格匹配，提高了模板的可读性
官方推荐利用这种代码特性 来书写 prop 及事件
本文中即为：（sayHello 与say-hello）

三、传递非字符串类型，使用v-bind

如传递数组传递数字传递对象

你可以使用一个对象绑定多个prop并传递参数

const prop = {name:'Asen',age:'20'}模板中

四、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 stringsreturn ['success', 'warning', 'danger'].includes(value)}},// 函数类型的默认值propG: {type: Function,// 不像对象或数组的默认，这不是一个工厂函数。这会是一个用来作为默认值的函数default() {return 'Default function'}}})

五、单向数据流

子组件中不允许直接修改父组件传递过来的参数（会抛出错误）
如需修改，可以在子组件中先获取到传递过来的值以后再次进行修改

const props = defineProps({name:"Asen"})const myname = ref(props.name)此时再次修改myname 即可

文末
新人创作，还望支持！欢迎学习交流，如有错误，还请指正！
已更新于2022/11/22