父子传值 props的声明(两种形式) 父组件为props成员赋值 常见错误

父组件向子组件传递(共享)数据

实现方式：

父组件通过v-bind 属性绑定向子组件共享数据。
同时，子组件需要使用 props 接收数据
简单一句话就是 :子props 父动态绑定

1.子组件props的声明(两种形式)

1. 数组形式

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

2. 对象形式

  props: {
    sonmoney: {
      type: [Number, String], //规定传入值的类型
      required: true, //必须传递
      validator(val) {
        //验证函数  只能return true或false
        if (val < 0 || val > 10000) return false;
        return true;
      },
    },
  },

2.父组件中在使用子组件的位置为props成员赋值

1. 可以直接赋值固定值
2. 如果赋值变量，则需要使用v-bind

<son :sonmoney="money"></son>

props的基本作用及使用方式:

1. props是组件的自定义属性，组件的使用者可以通过 props把数据传递到子组件内部，供子组件内部进行使用
2. 父组件通过props 向子组件传递数据，父组件通过 props 传递到子组件中的数据，必须在子组件的“props”节点中进行声明
3. 如果父组件给子组件传递了未声明的props 属性，则这些属性会被忽略，无法被子组件使用
4. 在父组件中，可以使用v-bind属性绑定的形式，为组件动态绑定 props 的值
5. 组件中如果使用“驼峰命名法”声明了props属性的名称，则有两种方式为其绑定属性的值（如：props:[“pubTime”]）
   

props 节点的类型:

1.数组类型：

通过数组的方式定义props成员，用于接收父组件传递的数据

它的缺点:无法为每个 prop 指定具体的数据类型,也无法进行相应的校验

2.对象类型：

通过对象的方式定义props成员，可以为每个prop成员制定规则(类型，校验…),常用的如下：
① 基础的类型检查 type:[Number]
② 多个可能的类型 type:[Number,String]
③ 必填项校验 required:true
④ 属性默认值 default:默认值 (跟必填项校验只能存在一个)
⑤ 自定义验证函数 validator(val) {}

详细的 props 验证方案，请参考 vue 的官方文档

基础的类型检查：
可以直接为组件的 prop 属性指定基础的校验类型，从而防止组件的使用者为其绑定错误的数据类型

多个可能的类型：
如果某个 prop 属性值的类型不唯一，此时可以通过数组的形式，为其指定多个可能的类型

必填项校验
required:true设置这个配置 说明这个属性父组件一定要传递

1. 往往根据你传递的数据 进行业务处理
2. 如果不传就不能进行业务处理
3. 所以有时候需要这个配置
   

属性默认值
default设置默认值 在没有传递值的情况下就会使用默认值
required跟default配置只能有一个

自定义验证函数：
在封装组件时，可以为 prop 属性指定自定义的验证函数，从而对 prop 属性的值进行更加精确的控制
验证函数 只能return true或false

常见错误