一            、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 即可

文末

新人创作                  ，还望支持！欢迎学习交流
 
 
 
 
 
 
 
 
 
 
 
 ，如有错误

















，还请指正！

已更新于2022/11/22