子父组件

父组件给子组件传值

• 1、在定义子组件的地方添加一个 props （英文翻译：支撑，维持）选项
  这个选项是一个数组，数组里面是父组件内的自定义属性名
  子组件直接从数组里面拿变量名来用，可以理解为：只要子组件的props找父组件要来了东西，就和自己的东西一样，父亲怎么用儿子也怎么用

• 实际用的时候 第一步：在子组件里面添加 props:[] 选项
  第二步：在子组件的属性里 绑定上从父组件那里拿来的变量名 （这个子组件是在父组件的template里的那个子组件名）
  第三步：在子组件自己的template里直接和父组件一样｛｛xxx｝｝使用就可以了

• 2、props除了可以是数组[]以外还可以是对象{}
  对象的key值为自定义属性名，value为数据类型（不会报错，不影响程序运行，警告代码不严谨）

  props:{
      msg:String,
      flag:Boolean,
      num:String | Number,
      obj:Object,
      arr:Array
    }
  

  可以理解为：用了对象可以检测从父组件那边拿来的变量的typeOf如果不对就警告一下，但是不影响页面的显示

• 3、props在传递对象的时候不仅仅只判定类型而已还可以加别的限制修饰

     props:{
      msg:{
        type:String,
        required:false,
        default:'hello vue',
        validator:(val)=>{
          // return true 就是验证通过
          return val.length >=20
        }
      },
      flag:Boolean,
      num:{
        type:Number,
        // type:String|Number,
        default:100
      },
      arr:{
        type:Array,
        default:()=>{
          return [1,2,3]
        }
      },
      obj:{
        type:Object,
        default:()=>{
          return {a:1,b:2}
        }
      }
    }
  

  • type （英文翻译：类型）验证属性类型 我们最好不要验证多属性类型 像这样 type:String|Number 因为这样会报错 但文档里并没说这个
  • required （英文翻译：需要的）该属性是否必须传递，即使有默认值还是必须传递 require：true 就是父组件的这个变量子组件必须使用，如果没用就会警告
  • default （英文翻译：默认的）设置一个默认的值，如果用的时候没有重新传值，就直接使用默认值 （在子组件定义了父组件的属性，但在父组件的template的子组件里却没有用这个属性，那么就会按props定义的顺序输出默认值，必传属性和默认属性冲突 既然必传为true那就肯定要传，不传的时候才启用默认值）
    注意：：：在父组件的template的子组件里绑定了这个属性 我们就称作父组件给子组件传了 传的就是绑定的这个变量 没有在这里的子组件标签上绑定这个变量 我们就说 没传。
  • validator （英文翻译：检验器）可以自定义验证规则 val就是传的值 return就是验证的条件

     validator:(val)=>{
       // return true 就是验证通过
       return val.length >=20
     }